JSFiddle - React, Tailwind, and code Playground

HTML

<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...

CSS

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
}