Full height background-color on list item requires padding or overflow?

Question

I have a solution for my problem, but it doesn't seem right. I want to know what's going on.

Nested list item's background colour doesn't extend to the bottom even though there's no margin on it (see the gap below the blue background in the screen shots). The paragraph inside does have a margin. But I've tried to reproduce this outside of my app (which uses Bootstrap) and I can't. In Firebug I tried turning off all CSS except that which was necessary to show the problem (ie, the background-color and border -- see 2nd image), but it makes no difference. Seen in Chrome and Firefox.

The fix is either adding bottom padding or overflow-y:auto; to the inner list item. But why? Has anyone encountered something like this?

I can't post all the code here, but the HTML at least is something like this:

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

[Update] Here is a simplified, non-Bootstrap version. Why no gaps in this one?

  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

The spacing is occurring because of the margins in the p elements inside the li s, specifically the bottom margin.

This behavior is defined as 'collapsing margins'. More info here: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

You can see this by setting them to 0.

.notification-new p{
  margin:0;
}

Live example: http://www.bootply.com/wlfIl3RziC

Full code below:

 .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>