頂部邊距不起作用

Question

對不起，我是CSS的新手。我有以下的html：

<div class="box-A" >Box A is here</div> 
<div class="box-B" >Box B is here</div> 

，我曾試圖以下CSS應用到它：

.box-A{ 
    background-color: red; 
    padding: 30px; 
    margin: auto; 
    border: 13px solid green; 
    margin-bottom: 40px; 
} 

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140 px; 
} 

它可以正確處理box-A同時當我申請margin-top: 140 px;到box-B我希望看到一個保證金在2個盒子之間大約180px。 但沒有任何反應。你能告訴我爲什麼margin-top不起作用嗎？

Answer 1

請勿在px和數字之間使用空格。

.box-B{ 
    background-color: blue; 
    padding: 40px; 
    margin-top: 140px; 
} 

Answer 2

關於向w3 schools css margin-top property它可能發生，只有最大的兩個值（頂部和底部）被接受。

Margin Collapse。元素的頂部和底部邊距有時會摺疊成單個邊距，等於兩個邊距中最大的邊距。 這不會發生在水平邊緣（左側和右側）！只有垂直邊緣（頂部和底部）！