div元素不工作

我有兩個div元素和nav > nav_1。當我將margin-top:20px;添加到nav時，nav根據正確的身體下降20px。
但是，當我將此margin-top:20px;添加到nav_1,nav_1根據正文20px與nav。
爲什麼？ nav_1nav的元素，它應該根據nav移動。
在這個問題即時尋找一個解釋div元素不工作

.nav { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: black; 
 
    margin-top:50px; 
 
} 
 
.nav .nav_1 { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin-top:50px; 
 
}

<div class="nav"> 
 
    <div class="nav_1"> 
 
    </div> 
 
</div>

來源

2015-12-22 Talha Kavcar

有一個在您的代碼示例 – messerbill

@messerbill沒有保證金，但它不是一個quesiton修復 –

相關 - http://stackoverflow.com/questions/9519841/why-does-this-css -margin-top-style-not-work –

這是「保證金崩潰」機制中的一個案例。簡而言之，父母和子女因素的邊際被摺合爲大小等於其相應邊際的最大值的單個邊際。有幾種方法可以禁用這種行爲，例如向父元素添加邊框或填充。您可以通過mdn article瞭解有關該機制的更多信息。

來源

2015-12-22 12:20:55

-1

繼@Paul Kozlovitch回答，要解決此問題，您可以設置父母display:inline-block（或float等）。

.nav { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: black; 
 
    margin-top:50px; 
 
    display:inline-block; 
 
} 
 
.nav .nav_1 { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin-top:50px; 
 
}

<div class="nav"> 
 
    <div class="nav_1"> 
 
    </div> 
 
</div>

來源

2015-12-22 12:21:42

嗯我把div元素已經是一個塊... thx –

'塊'，而不是'inline-block' ..很高興幫助;） –

您可以在nav使用padding和.nav .nav_1

或

刪除margin您可以在.nav .nav_1

添加

\t .nav { 
 
    height: 500px; 
 
    width: 500px; 
 
    background-color: black; 
 

 
} 
 
.nav .nav_1 { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin-top:20px; 
 
    display:inline-block; 
 
}

<div class="nav"> 
 
    <div class="nav_1"> 
 
    </div> 
 
</div>

來源

2015-12-22 12:21:55

填充不能解決它，但我認爲這是關於添加「display：inline-block;」， –

div元素不工作

回答

相關問題