2

The first row has a height that is much larger than the margin bottom of its .content div, so that the margin-bottom is contained (and should not effect anything outside of its container). Yet, there's a gap between the two rows... very mysterious.

See this plunker for a visual representation and code

HTML:

<div class="row row1">
  Row 1 (min-height: 100px)
  <div class="content">Content (margin-bottom: 10px;)</div>
</div>
<div class="row row2">
  Row 2:  Why the gap?  The margin-bottom on Content stops WAY short of this div.
</div>

CSS:

  .row1 { min-height: 100px; }
  .row1 .content { margin-bottom: 10px; }

Notes:

  • Changing min-height to height removes the gap
  • Adding overflow:hidden; to the first row removes the gap
  • I'm using Chrome on a Mac. I didn't have a chance to test this in any other browsers (its time for lunch)

Why does this happen though? Is it a bug?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Michael Lewis
  • 4,252
  • 6
  • 28
  • 39

0 Answers0