Marge et remplissage en CSS : en quoi ces propriétés d'espacement diffèrent-elles ?

Comprendre la distinction : marge et remplissage en CSS

Lorsqu'il s'agit d'ajuster l'espace autour des éléments en CSS, deux propriétés cruciales émergent : la marge et le remplissage. Bien que les deux soient utilisés pour manipuler l'espacement, ils présentent des comportements et des applications distincts.

Réduire automatiquement la marge verticale

La différence fondamentale réside dans le comportement des marges verticales. Même si les marges des éléments adjacents se chevauchent, ce n'est pas le cas du remplissage. Lorsqu'un élément avec un remplissage de 1em est suivi d'un autre élément avec un remplissage de 1em, l'espacement vertical total entre le contenu devient 2em. En revanche, lorsqu'une marge de 1em est utilisée à la place, l'espacement vertical reste à 1em en raison du chevauchement des marges. Cette fonctionnalité est particulièrement utile pour maintenir un espacement cohérent entre les éléments, quel que soit le contexte.

Inclusion dans la région de clic et le style

Le remplissage est considéré comme faisant partie d'un élément, étendant ainsi la région de clic et étant incorporé dans la couleur et les images d'arrière-plan. La marge, cependant, ne fait pas partie de l'élément et n'affecte pas ces aspects.

Démonstration visuelle

Pour illustrer les différences, explorons un exemple HTML et CSS simple :

<div class="box">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box padding">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

<div class="box margin">
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

div.box > div {
    height: 50px;
    width: 50px;
    border: 1px solid black;
    text-align: center;
}
div.padding > div {
    padding-top: 20px;
}
div.margin > div {
    margin-top: 20px;
}

Comme vous pouvez le constater, les éléments avec rembourrage ont un espacement vertical accru, tandis que ceux avec marges conservent un espacement vertical accru. 1em d'écart.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!