• 2019-10-19

    Reusable elements


    Start a discussion

    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.


    Only the last p will be without margin-bottom.

    <div class="content">
      <h1>Heading 1</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>

    Source: This post