• 2019-10-19

    Reusable elements

    Comments

    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.

    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