2019-10-19
Reusable elements
To make an element reusable, it's important to not have paddings or margins around it.
.content h1,
.content p {
margin-bottom: 1rem;
}
.content >*:last-child {
margin-bottom: 0;
}
The first part will add a space between the elements. The last part will make sure there are no margins around the elements, only in between.
HTML
Only the last p
will be without margin-bottom
.
<div class="content">
<h1>Heading 1</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Source: This post
Comments