Marge et remplissage en CSS : quelle est la principale différence dans l'espacement des éléments ?

Comprendre la marge et le remplissage en CSS

CSS fournit deux propriétés cruciales pour gérer l'espacement et la taille des éléments : la marge et le remplissage. Comprendre les principales différences entre ces propriétés est essentiel pour une conception Web efficace.

Marge et remplissage

La principale distinction entre la marge et le remplissage réside dans leur comportement en matière de chevauchement vertical. . Les marges sont considérées comme extérieures à un élément et peuvent se chevaucher lorsque les éléments adjacents ont des marges. En revanche, le remplissage est traité comme une partie intégrante de l'élément et ne se chevauche pas.

Impact sur l'espacement des éléments

La marge et le remplissage ont des effets variables sur l'espacement entre éléments adjacents. Avec le remplissage, l'espace entre le contenu des éléments reste le même, même lorsque le remplissage des éléments adjacents est appliqué. Cependant, lorsque des marges sont utilisées à la place, l'espace entre les éléments diminue puisque les marges se chevauchent.

Domaines d'application

Le remplissage est idéal pour créer un espacement au sein d'un élément, affectant uniquement la zone intérieure. Sa présence se reflète dans la région de clic de l'élément et dans la couleur ou l'image d'arrière-plan. La marge, en revanche, ajoute de l'espace en dehors des frontières de l'élément, créant un espace entre celui-ci et les éléments voisins. La marge est fréquemment utilisée pour obtenir un espacement cohérent, quels que soient les éléments adjacents.

Démonstration visuelle

Considérez le code suivant :

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; }

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

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Cette démonstration illustre comment le remplissage crée de l'espace au sein des éléments, tandis que la marge ajoute de l'espace entre eux.

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!