JSFiddle - React, Tailwind, and code Playground

by Brandon Frohs

HTML

<h1>Margins collapsed</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>

<h1>Margins not collapsed <small>(using <code>padding</code> on wrapping <code>&lt;div></code> instead)</small></h1>
<div><p>Paragraph 1</p></div>
<div><p>Paragraph 2</p></div>

CSS

p {
    margin-top:10px;
    margin-bottom:10px;
    background:red;
}
div {
    padding-top:10px;
    padding-bottom:10px;
}
div > p {
    margin-top:0;
    margin-bottom:0;
}