html - 列表项上的全高背景颜色需要填充或溢出？

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 中的 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>