Un guide des propriétés de marge CSS : margin-top, margin-right, margin-bottom et margin-left

Guide des propriétés de marge CSS : margin-top, margin-right, margin-bottom et margin-left, nécessitent des exemples de code spécifiques

Introduction :
En CSS, margin (margin) est la distance entre un élément positionné et son éléments environnants L'espacement entre les éléments peut être utilisé pour contrôler la distance entre les éléments et les autres éléments, apportant plus de flexibilité et de beauté à la conception Web.

Cet article présentera en détail les quatre propriétés des marges CSS : margin-top, margin-right, margin-bottom et margin-left. Dans le même temps, afin de mieux comprendre et apprendre, des exemples de codes spécifiques seront fournis pour aider les lecteurs à mieux les appliquer au développement réel.

1. Attribut Margin-top
L'attribut margin-top est utilisé pour définir la marge supérieure d'un élément. Il accepte les valeurs en unités absolues ou relatives, telles que les pixels (px), les pourcentages (%), les em, etc.

Exemple de code :

div {
  margin-top: 20px; /* 顶部外边距设置为 20px */
}

2. Attribut Margin-right
L'attribut margin-right est utilisé pour définir la marge droite de l'élément. Comme la propriété margin-top, elle accepte également les valeurs en unités absolues ou relatives.

Exemple de code :

div {
  margin-right: 10%; /* 右侧外边距设置为父元素宽度的 10% */
}

3. Attribut Margin-bottom
L'attribut margin-bottom est utilisé pour définir la marge inférieure d'un élément. De même, il peut accepter des valeurs en unités absolues ou relatives.

Exemple de code :

div {
  margin-bottom: 2rem; /* 底部外边距设置为 2 个根元素字体大小 */
}

4. Attribut Margin-left
L'attribut margin-left est utilisé pour définir la marge gauche d'un élément. De même, il peut accepter des valeurs dans différentes unités.

Exemple de code :

div {
  margin-left: -30px; /* 左侧外边距设置为 -30px */
}

5. Méthode d'abréviation
En plus de définir les propriétés de marge dans chaque direction individuellement, vous pouvez également utiliser la méthode d'abréviation pour définir les marges dans quatre directions à la fois. L'ordre est en haut, à droite, en bas et à gauche.

Exemple de code :

div {
  margin: 10px 20px 30px 40px; /* 上右下左的外边距分别设置为 10px, 20px, 30px 和 40px */
}

6. Notes

1. Les marges se chevauchent (c'est-à-dire fusionnent) : lorsque deux cases consécutives ou plus sont disposées verticalement, leurs marges verticales se chevauchent, selon la plus grande des deux. La plus grande sert de marge finale.
2. Les marges n'ont aucun effet sur les éléments positionnés de manière absolue : Si un élément est positionné de manière absolue par rapport à son bloc conteneur, ses marges n'auront aucun effet sur les autres cases.
3. Les marges ne sont pas valables pour les éléments flottants : les marges d'un élément flottant n'affectent pas les marges des autres éléments, et les marges des autres éléments n'affectent pas la position de l'élément flottant.
4. Les marges n'affecteront que les marges gauche et droite des éléments en ligne, mais pas les marges supérieure et inférieure.

Conclusion : 
Grâce à l'introduction de cet article, nous comprenons l'utilisation de base et les précautions de l'attribut margin en CSS. Dans le développement réel, une utilisation raisonnable et flexible des attributs de marge peut apporter plus de possibilités et de beauté à la conception Web. J'espère que cet article pourra aider les lecteurs à apprendre et à appliquer les propriétés de marge CSS.

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!