<p>
  <span>span1</span>
  <span>span2</span>
</p>

<h2>Learning</h2>
<ul>
  <li>Open the dev tool and see the <code>margin-bottom</code> exist, but <strong>not respected by <code>Paragraph</code></strong> element.
  <li>Add display to <code>inline-block</code> and notice how the parent <code>paragraph</code> element starts to respect the margin.
</ul>
p {
  border: 2px solid;
  margin: 0.5rem;
}

span {
  background-color: dodgerblue;
  margin-bottom: 1rem;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.