Bug 8234 - Small gap appears under div with min-height when it contains a "hr" tag
Summary: Small gap appears under div with min-height when it contains a "hr" tag
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: 420+
Hardware: Mac OS X 10.4
: P3 Normal
Assignee: Nobody
URL: http://level39.com/hr-bug/
Keywords: HasReduction
Depends on:
Reported: 2006-04-07 09:08 PDT by Dan Richman
Modified: 2008-06-26 05:22 PDT (History)
2 users (show)

See Also:

Test XHTML Page (496 bytes, application/xhtml+xml)
2006-04-07 09:23 PDT, Dan Richman
no flags Details
Example of bug in a layout (807 bytes, text/html)
2006-04-12 15:10 PDT, Dan Richman
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Dan Richman 2006-04-07 09:08:29 PDT
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.
Comment 1 Dan Richman 2006-04-07 09:23:10 PDT
Created attachment 7555 [details]
Test XHTML Page
Comment 2 Dan Richman 2006-04-12 15:10:41 PDT
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.
Comment 3 Dave Hyatt 2006-04-18 18:41:26 PDT
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.
Comment 4 Philippe Wittenbergh 2008-06-26 05:18:56 PDT
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
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. 

Here are some more tests illustrating the issue (in 'modern' browsers)

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