html { font-family: Helvetica, Arial, sans-serif; } .parent { overflow: hidden; /* Prevent ancestor's collapsing */ max-width: 50em; margin: 0 auto; background: lightblue; } .child { background: tomato; margin: 1em; } .float { float: left; clear: left; } .display { display: inline-block; /* inline-table works too */ } h2, h3 { text-align: center }
<h2>Siblings have <code>margin: 1em</code></h2> <h3>Siblings have nothing. Margin collapse.</h3> <div class="parent"> <p class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> <p class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> </div> <h3>Siblings have <code>float: left; clear: left</code>. Fixed.</h3> <div class="parent"> <p class="child float">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> <p class="child float">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> </div> <h3>Siblings have <code>display: inline-block</code>. Fixed.</h3> <div class="parent"> <p class="child display">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> <p class="child display">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat enim ducimus accusantium recusandae quidem velit quasi voluptatibus voluptatum dolores voluptate in eos delectus fugit odit est reiciendis at? Impedit cupiditate.</p> </div>