Parágrafo e Cabeçalhos

definidos em reset.css

h1 - h6

<h1></h1>

Exemplo Cabeçalho h1
<h2></h2>

Exemplo Cabeçalho h2
<h3></h3>

Exemplo Cabeçalho h3
<h4></h4>

Exemplo Cabeçalho h4
<h5></h5>
Exemplo Cabeçalho h5
<h6></h6>
Exemplo Cabeçalho h6
 
h1, h2, h3, h4, h5, h6 {
    position: relative;
    font-family: var(--fontPrime);
    letter-spacing: 0.010rem;
}
h1 {
    font-size: 2rem;
    margin: 0 0 0.25rem;
}
h2 {
    font-size: 1.75rem;
    margin: 0.95rem 0 0.8rem;
}
h3 {
    font-size: 1.5rem;
    margin: 0.9rem 0 0.65rem;
}
h4 {
    font-size: 1.35rem;
    margin: 0.9rem 0 0.6rem;
}
h5 {
    font-size: 1.19rem;
    margin: 0.9rem 0 0.6rem;
    font-weight: 600;
}
h6 {
    font-size: 1.06rem;
    margin: 0.75rem 0 0.5rem;
    font-weight: 600;
}

Parágrafos .  .   .

Maecenas nisi fringilla facilisi wisi curae fringilla corrupti quaerat proin, laborum class! Per arcu accusamus asperiores arcu convallis. Inceptos aliqua tincidunt consectetur. Proident maiores amet integer, non hac, ultricies laborum.

Fuga itaque faucibus condimentum, felis cillum senectus nec diam, sit gravida tellus mi similique quibusdam, placerat eiusmod irure taciti praesent maxime consequuntur aliquet habitant pharetra tellus rhoncus ut sagittis habitasse.

Nihil ultrices mollit gravida. Veniam ullam esse atque magna penatibus dictumst congue. Lectus posuere, ratione velit dignissim eu sagittis? Sagittis habitasse. Netus voluptas quod. Porro quod ex bibendum sunt unde.

<div>
    <p>Maecenas nisi fringilla facilisi wisi curae fringilla.</p>
    <p>Fuga itaque faucibus condimentum, felis cillum senectus nec diam.</p>
    <p>Nihil ultrices mollit gravida. Veniam ullam esse atque magna.</p>
</div>

p {
    position: relative;
    margin-top: 0.690rem;
    margin-bottom: 0.690rem;
}

Após os elementos h2-h6 é removido a margin superior do elemento p que vem imediatamente depois.

Exemplo Cabeçalho h4

Maecenas nisi fringilla facilisi wisi curae fringilla corrupti quaerat proin, laborum class! Per arcu accusamus asperiores arcu convallis. Inceptos aliqua tincidunt consectetur. Proident maiores amet integer, non hac, ultricies laborum.

Nihil ultrices mollit gravida. Veniam ullam esse atque magna penatibus dictumst congue. Lectus posuere, ratione velit dignissim eu sagittis? Sagittis habitasse. Netus voluptas quod. Porro quod ex bibendum sunt unde.

<div>
    <h4>Exemplo Cabeçalho h4</h4>
    <p>Maecenas nisi fringilla facilisi wisi curae fringilla.</p>
    <p>Fuga itaque faucibus condimentum, felis cillum senectus nec diam.</p>
    <p>Nihil ultrices mollit gravida. Veniam ullam esse atque magna.</p>
</div>

h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
    margin-top: 0;
}

Em elementos filho de article é removido o espaçamento superior do primeiro elemento e inferior do último.

Exemplo Cabeçalho h3

Fuga itaque faucibus condimentum, felis cillum senectus nec diam, sit gravida tellus mi similique quibusdam, placerat eiusmod irure taciti praesent maxime consequuntur aliquet habitant pharetra tellus rhoncus ut sagittis habitasse.

Maecenas nisi fringilla facilisi wisi curae fringilla corrupti quaerat proin, laborum class! Per arcu accusamus asperiores arcu convallis. Inceptos aliqua tincidunt consectetur. Proident maiores amet integer, non hac, ultricies laborum.

<article>
    <h3>Exemplo Cabeçalho h 3</h3>
    <p>Fuga itaque faucibus condimentum, felis cillum senectus nec diam gravida.</p>
    <p>Maecenas nisi fringilla facilisi wisi curae fringilla corrupti quaerat proin.</p>
</article>

/** aqui 'se ouver' espacamento superior no primeiro filho de article, nos o removemos */
article > *:first-child {
    margin-top: 0;
    padding-top: 0;
}
/** aqui 'se ouver' espacamento inferior no ultimo filho de article, nos o removemos */
article > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}