Bug 8234 – Small gap appears under div with min-height when it contains a "hr" tag

• Component: Layout and Rendering
• Status: NEW

[Dan Richman]

If you have a div with a min-height value specified, and you place a "hr" tag inside that div, the div inherits the space from below the hr.  This gives the appearance of margin below the div when no margin should be present.

This bug is not apparent when the div has a specified height or if you give the div a border.

[Dan Richman]

Created attachment 7555 [details]
Test XHTML Page

[Dan Richman]

Created attachment 7660 [details]
Example of bug in a layout

On both Safari and Opera, a gap mysteriously appears between the MAIN div and the FOOTER div when an "hr" is placed inside the MAIN div.  This only happens when the MAIN div has a "min-height" value and no border. On all other browsers, there is never a gap between the two divs.

[Dave Hyatt]

We implement the space around <hr>s using margins.  The bottom margin of the <hr> then collapses with the parent div.  This is correct in terms of our implementation.  It may be that Firefox and WinIE don't use margins to create the space around an <hr>.  We'll need to investigate what exactly they do and try to emulate it.

[Philippe Wittenbergh]

The issue at hand is not limited to <hr> (which e.g. in Gecko also has  margins). It is visible for any block level element.

The key is the use of min-/max-height on the parent element.
In that case, see CSS 2.1:8.3.1 Collapsing margins
[quote]
The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border. 
[/quote]

Here are some more tests illustrating the issue (in 'modern' browsers)
http://www.brunildo.org/test/collminmax.html

What IE 6/7 does is something different, as (height) min- and max height trigger the dreaded 'hasLayout' hell (in this case, the top/bottom margin of the descendant is swallowed into nothingness).

[Brent Fulgham]

This issue reproduces in Safari 16. We do not match Chrome or Firefox.

[Radar WebKit Bug Importer]

<rdar://problem/96545373>