Skip to content

Instantly share code, notes, and snippets.

@skid

skid/gist:5048988

Created February 27, 2013 15:58
Show Gist options
  • Save skid/5048988 to your computer and use it in GitHub Desktop.
Save skid/5048988 to your computer and use it in GitHub Desktop.
Download ZIP
Description of the margin-bottom bleed in chrome.
Raw
gistfile1.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Margin bottom bug demonstration</title>
<meta name="description" content="">
<style type="text/css" media="screen">
p {
margin: 5px 5px 10px;
}
div {
margin: 0;
padding: 0;
}
#container {
width: 500px;
margin: auto;
}
.box{
width: 200px;
}
.inside {
background: #e5e5ff;
border-top: solid 1px #ccc;
}
#minheight {
background: #ffe5e5;
min-height: 300px;
}
</style>
</head>
<body>
<div id="container">
<div class='box'>
<div class='inside' id='minheight'>
<p class='text'>This is some text in a "p" element inside the red div. The "p" element has margin-bottom set to 10px.</p>
</div>
<div class='inside'>
This div should be 10px up, touching the red box.
However, the "margin-bottom: 10px" on the "p" element inside the red div bleeds out, even though the red div has
min-heigh set to 300px.
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment