元素，沒有高度，保證金，填充或邊框依然佔據，因爲它下面的元素利潤率

Question

我有這樣的元素的列表的空間：

<div class="outer"> 
    <div class="inner first">First</div> 
    <div class="inner">Second</div> 
</div> 

如果我申請以下樣式

.inner { 
    height: 30px; 
    margin: 10px; 
} 

.first { 
    height: 0; 
    margin: 0; 
    overflow: hidden; 
} 

並假設填充和邊框已經0，元素的存在仍然佔有一定的空間（這大概是因爲元件的邊緣的吹它），這不會如果元件的顯示屬性設定爲none。

這導致當我使用CSS動畫製作的第一要素消失的問題，第二順利上來。見下面

$(".first").addClass("hide").bind("webkitAnimationEnd animationEnd", function() { 
 
    $(".first").addClass("hidden") 
 
    });

.inner { 
 
    background: red; 
 
    margin: 10px; 
 
    height: 30px; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
.hide { 
 
    animation-name: disappear; 
 
    animation-duration: 2s; 
 
} 
 

 
.hidden {display: none} 
 

 
@keyframes disappear { 
 
    from { 
 
    height: default; 
 
    margin: default; 
 
    } 
 
    to { 
 
    height: 0; 
 
    margin: 0; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="outer"> 
 
    <div class="inner first">First</div><div class="inner">Second</div> 
 
</div>

在這種情況下的片段，我怎麼能管理，使第一個元素消失了，然後我可以完全從頁面刪除？

請注意，我已經過上如此相似的問題了，這是不是造成問題的兩個元素之間的空白的情況。

Answer 1

新增CSS一樣：

body{margin: 0;}