Question from the HTML5/CSS3 test

Calculate the vertical spacing between 2 paragraphs in HTML5

Hard

Or the following code:

<style>
    p{
      margin: 8px 0;
      padding: 2px 0;
    }
</style>
 
<p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<p>Quia, assumenda aliquam? Dolore facilis ab nihil.</p>

What will be theexact value of the vertical spacing between these 2 paragraphs?

Author: Jean-marie CléryStatus: PublishedQuestion passed 1590 times

Edit

Community Evaluations

Joan-Léna

06/02/2024

Je n'ai pas saisi cette question, on ne fait pas, la somme totale de l'espacement vertical entre les deux paragraphes donc 16px (marge) + 4px (rembourrage) = 20px ?

Auteur anonyme

16/02/2024

Non, vu que les 2 blocs sont une adjacent et ont chacun une marge ( -bottom pour celui du dessus, -top pour celui du dessous ), alors les marges fusionnent. Il ne faut donc compter qu'une seule marge, et appliquer les paddings respectifs. Ce qui fait donc 2+2+8 = 12. Cf https://developer.mozilla.org/fr/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing