Skip to content

Instantly share code, notes, and snippets.

@bitinn

bitinn/firefox_margin.html

Forked from Maizify/firefox_margin.html
Last active December 20, 2015 21:58
Show Gist options
  • Save bitinn/6201106 to your computer and use it in GitHub Desktop.
Save bitinn/6201106 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
firefox_margin.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin collapse algorithm bug workaround</title>
<style>
body{
margin:0;
}
.example {
/* margin collapse algorithem bug as in
https://bugzilla.mozilla.org/show_bug.cgi?id=451791,
margin-bottom incorrectly applied to child element with float */
margin-bottom: 20px;
background: red;
}
.example-inner {
float: left;
}
.clear {
clear: both;
}
.solution1 {
/* workaround */
border: 1px solid black;
margin-bottom: 20px;
background: red;
}
.solution1-inner {
float: left;
}
.solution2 {
/* alternative */
overflow: hidden;
margin-bottom: 20px;
background: red;
}
.solution2-inner {
float: left;
}
</style>
</head>
<body>
<div class="example">
<div class="example-inner">
has float
</div>
<div class="clear"></div>
</div>
<!--
<div class="solution1">
<div class="solution1-inner">
has float
</div>
<div class="clear"></div>
</div>
-->
<!--
<div class="solution2">
<div class="solution2-inner">
has float
</div>
</div>
-->
<p>make sure margin still exists</p>
</body>
</html>
@bitinn
Copy link
Author

bitinn commented Aug 10, 2013

to explain: any css property that prevent firefox from triggering margin collapse algorithm will work, such as non-default border, overflow, display value.

note that this is a rare situation: float child must be the first content under parent element with margin-bottom to reproduce the bug, and if said parent is under other element with non-default border, overflow, display value, it would not trigger.

to sum up: you need to be pretty unfortunate to encounter this bug, and workaround is trivial. that's probably why mozilla never got around to fix it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment