列表項上的全高背景色是否需要填充或溢出？

Question

我有解決問題的方法，但這似乎不正確。 我想知道發生了什么事。

嵌套列表項的背景顏色不會擴展到底部，即使沒有空白（請參見屏幕截圖中藍色背景下方的間隙）。 里面的段落確實有一個空白。 但是我嘗試在我的應用程序（使用Bootstrap）之外重現此內容，但我做不到。 在Firebug中，我嘗試關閉了所有CSS，除了顯示問題所必需的CSS（即背景顏色和邊框-參見第二張圖片），但這沒有什么區別。 在Chrome和Firefox中可見。

解決方法是添加底部填充或overflow-y:auto; 到內部列表項。 但為什么？ 有沒有人遇到過這樣的事情？

我無法在此處發布所有代碼，但是HTML至少是這樣的：

<ul class="nav navbar-nav navbar-right">
    <li class="dropdown open">
         <ul class="dropdown-menu notification-list">   
                    <li class="notification-new">
                        <div class="text-muted">01/13/2015</div>
                        <p>Check out the new features coming to the 2015.1 release <a href="javascript:void(0)">here</a>!</p>
                    </li>
                    <li class="notification-new">
                        <div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div>
                        <p>Upcoming server maintenance scheduled for 11:00pm PST.</p>
                    </li>

[更新]這是簡化的非Bootstrap版本。 為什么這沒有差距？

  ul { width: 300px; border: 1px solid red; float: left; } li.sub { border: 1px solid green; background-color: yellow; padding: 8px 8px 0; } p { margin:10px; /* no gaps with or without this */ } 

  <ul> <li><p>item 1</p> <ul> <li class="sub"> <div> something </div> <p> stuff </p> </li> <li class="sub"> <div> something </div> <p> stuff </p> </li> </ul> </li> <li>thing <ul> <li class="sub"> nuther </li> </ul> </li> </ul> 

Answer 1

之所以會出現間距，是因為li s內的p元素的邊距，特別是底部邊距。

此行為被定義為“崩潰邊距”。 此處的更多信息： http : //www.w3.org/TR/CSS2/box.html#collapsing-margins

您可以通過將其設置為0來查看。

.notification-new p{
  margin:0;
}

實時示例： http ： //www.bootply.com/wlfIl3RziC

完整代碼如下：

 .notification-new { background-color:red; } .notification-new p{ margin:0; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav navbar-nav navbar-right"> <li class="dropdown open"> <ul class="dropdown-menu notification-list"> <li class="notification-new"> <div class="text-muted">01/13/2015</div> <p>Check out the new features coming to the 2015.1 release <a href="javascript:void(0)">here</a>!</p> </li> <li class="notification-new"> <div class="text-muted">12/24/2014<button class="close" type="button"><span class="sr-only">Close</span></button></div> <p>Upcoming server maintenance scheduled for 11:00pm PST.</p> </li> </ul> </li> </ul>