title: TailwindCSS Margins of Parent and Child overlapping?
body: <p>I am using TailwindCSS and have a nested HTML structure like so:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;my-4&quot;&gt;
    &lt;div class=&quot;my-4&quot;&gt;
      &lt;!-- Some Content --&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>What I don't understand is why the inner div is placed in such a way that its border aligns with the border of the outer div and the margins which I applied overlap. However, I noticed that when I add a border around the outer div, the margins suddenly behave how i would expect: the outer div contains the elements including margins.</p>
  <p>Here is a jsfiddle to illustrate my point: <a href="https://jsfiddle.net/1vptz5fc/" rel="nofollow noreferrer">https://jsfiddle.net/1vptz5fc/</a></p>
  <p>How can I get the divs to behave like they do with borders, just without adding a border?</p>