div塊的底部邊緣沒有生效

我有幾個嵌套的div塊，我的問題是最後一個left_navigation_container的底部邊距沒有7px的間距，我不知道爲什麼（jsfiddle）。div塊的底部邊緣沒有生效

HTML：

<div class="left_navigation_outer"> 
    <div class="left_navigation_header_outer"> 
     <div class="left_navigation_header_logo"> 
      <strong>Title</strong> 
     </div> 
    </div> 
    <div class="left_navigation_container"> 
    </div> 
</div>

CSS：

div.left_navigation_outer { 
    background: green; 
    background-repeat: repeat; 
    margin:10px; 
    -moz-box-shadow: 0px 0px 5px #ababab; 
    -webkit-box-shadow: 0px 0px 5px #ababab; 
    box-shadow: 0px 0px 5px #ababab; 
} 


div.left_navigation_header_outer { 
    background: blue; 
    background-repeat: repeat; 
    height: 50px; 
    border-top: 4px solid black;  
} 

div.left_navigation_header_logo { 
    line-height:50px; 
    color: #efefef; 
    text-shadow: 0 -1px #000; 
    text-align: center; 
    text-transform: uppercase; 
} 

div.left_navigation_container { 
    background: red; 
    background-repeat: repeat; 
    height: 50px; 
    margin: 7px; 
}

來源

2013-01-11 sooper

你的問題是由這個元素的邊緣計算方式引起的 - 它指的是它的兄弟姐妹，而不是父母的位置。

您可以爲包含「TITLE」文本的其他div設置保證金並查看與margin-top相同的問題。

編輯：您可以在<div class="left_navigation_container"></div>之後添加<div style="width: 100%; height: 1px;"></div>觸發底部邊距並使其可見。

來源

2013-01-11 13:37:20 Kamo

可以解決這個問題通過給div.left_navigation_outer一個padding-bottom

來源

2013-01-11 13:15:25

我想到了這一點，但是當我應用填充時，'left_navigation_container'的邊距生效，所以我獲得了兩倍的實際空間。我可以刪除底部邊距，但我想知道爲什麼會發生這種情況。 – sooper

ahh - 用「padding-bottom」思路打我吧 –

我無法解釋它爲什麼會發生。但它不時發生，並且每次都解決它。 –

奇怪...不知道爲什麼，但如果添加填充底1px到div.left_navigation_outer它修復了它 - 這是我的fork of your fiddle

div.left_navigation_outer { 
    background: green; 
    background-repeat: repeat; 
    margin:10px; 
    -moz-box-shadow: 0px 0px 5px #ababab; 
    -webkit-box-shadow: 0px 0px 5px #ababab; 
    box-shadow: 0px 0px 5px #ababab; 
    padding-bottom:1px; /* tricky hack to get the bottom spacing */ 
}

來源

2013-01-11 13:18:35

我覺得在底部添加一個像素並讓它自行修復是非常不舒服的。我認爲最好在底部添加一個5px的填充，並從'left_navigation_container'中移除5px的頁邊距。但我仍然想知道爲什麼會發生這種情況。 – sooper

我同意總是很高興知道**爲什麼**發生了一些事情，所以你不是巧合編程。說實話，我不確定，我只是'擺弄'，直到我有底部空間！ –

div塊的底部邊緣沒有生效

回答

相關問題