html { font-family: Helvetica, Arial, sans-serif; } .parent { background: lightblue; max-width: 50em; margin: 0 auto; } .child { margin: 1em; background: tomato; } .overflow { overflow: hidden; } .border { border: 1px transparent solid; } .padding { padding: 1px; } .display { display: inline-block; /* inline-table works too */ } .float { float: left; /* right works to */ } h2, h3 { text-align: center }
<h2>Child has <code>margin: 1em</code>.</h2> <h3>Parent has 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> </div> <h3>Parent has <code>overflow: hidden</code>. Fixed.</h3> <div class="parent overflow"> <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>Parent has <code>border: 1px solid transparent</code>. Fixed.</h3> <div class="parent border"> <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>Parent has <code>padding: 1px</code>. Fixed.</h3> <div class="parent padding"> <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>Parent has <code>display: inline-block</code>. Fixed.</h3> <div class="parent display"> <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>Parent has <code>float: left</code>. Fixed.</h3> <div class="parent float"> <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>