NEW 8234
Small gap appears under div with min-height when it contains a "hr" tag 
https://bugs.webkit.org/show_bug.cgi?id=8234
Summary Small gap appears under div with min-height when it contains a "hr" tag
Dan Richman
Reported 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.
Attachments
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
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Dan Richman
Comment 1 2006-04-07 09:23:10 PDT
Created attachment 7555 [details] Test XHTML Page
Dan Richman
Comment 2 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.
Dave Hyatt
Comment 3 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.
Philippe Wittenbergh
Comment 4 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 [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
Comment 5 2022-07-06 13:42:38 PDT
This issue reproduces in Safari 16. We do not match Chrome or Firefox.
Radar WebKit Bug Importer
Comment 6 2022-07-06 13:43:51 PDT
<rdar://problem/96545373>
Note You need to log in before you can comment on or make changes to this bug.