<p>Hey, you know what sucks?</p>
<p>vaccuums</p>
<p>Hey, you know what sucks in a metaphorical sense?</p>
<p>black holes</p>
<p>Hey, you know what just isn't cool?</p>
<p>lava?</p>

p { margin: 40px;}

Fusion des marges verticales

Ajoutons un titre et un sous-titre.

.title { margin-bottom: 30px;}
.subtitle { margin-top: 15px;}

<h1 class="title">Ex-Nihilo</h1>
<h2 class="subtitle">Un simple cours HTML/CSS</h2>

Comme le titre de cette section a pu faire allusion à la réponse, la marge entre les deux éléments sera de 30px, et non de 45px. En effet, les marges qui se « touchent » vont se confondre.

“C’est bizarre !”

Vous pouvez considérer la marge d’un élément comme l’espace minimal qu’il souhaite avoir vis-à-vis des autres éléments.

C’est comme si l’élément disait: “Ok, je veux que le prochain élément soit à au moins 30px de moi. Si c’est plus, pourquoi pas. Mais au moins 30px s’il vous plait !”

Choisir entre margin et padding

Question piège. Cette question se pose lorsqu’aucune bordure ni aucun arrière-plan n’est appliqué.
En effet : si une bordure ou un arrière-plan est défini sur l’un ou l’autre élément, le rendu visuel sera différent. Mais si aucun élément n’est présent et que les marges et les paddings sont transparents, le résultat sera identique.

Demandez-vous pourquoi vous souhaitez espacer les éléments.
Est-ce pour permettre au contenu intérieur de mieux respirer ? Ou faut-il laisser tout l’élément respirer davantage ?
C’est le padding dans le premier cas, la marge dans le second.

En outre, tenez compte du fait que les marges peuvent fusionner.