Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Child margin collapsing" />
  <meta charset=utf-8 />
  <title></title>
</head>
<body>
  
  <h2>I have no margin</h2>
  
<div>
  <p>My top margin 20 is absorbed by the top margin 40 of my parent</p>
</div>
 
<div class="flipped">
  <p>My top margin 60 is absorbing the top margin 40 of my parent, but it is still outside my parent's padding box!</p>
</div>
​
  
<div class="padded">
  <p>My top margin 10 adds to my parent's padding 10 and does not affect my parent's top margin 40 </p>
</div>
 
<div class="bordered">
  <p>My top margin 10 adds to my parent's padding box, and does not affect my parent's top margin 40</p>
</div>
​
   
<div>
  <div></div>
  <div></div>
  <div></div>
  <p>Despite of empty siblings in front of me, my top margin 20 is still absorbed by the top margin 40 of my parent</p>
</div>
​
  
</body>
</html>
 
body {
  border: solid thin;
  padding: 20px;
}
​
h2 {
  margin: 0;
  background: #cff;
}
​
div {
  margin: 40px 0 0 0;
  background: #cfc;
}
p {
  margin: 30px 0 0 0;
  background: #cf9;
}
​
.flipped p {
  margin-top: 60px;
}
​
.padded {
  padding-top: 10px;  
}
.bordered {
  border-top: solid thin;
}
.padded p, 
.bordered p {
  margin-top: 10px;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
dmitrizpro
0viewers