L'attribut margin n'affecte pas les éléments en ligne

La marge a un effet différent sur les éléments en ligne que sur les éléments au niveau du bloc. Dans les éléments en ligne, l'attribut margin affecte uniquement les marges verticales supérieure et inférieure, pas les marges horizontales gauche et droite.

Par exemple, il existe un élément de paragraphe <p></p> en HTML, nous pouvons lui définir des styles et observer l'effet de l'attribut margin sur celui-ci.

Le code HTML est le suivant :

<p class="example">这是一个段落</p>

Le code CSS est le suivant :

.example {
  margin: 20px;
  background-color: lightblue;
  display: inline;
  padding: 10px;
}

Le code ci-dessus définit un élément de paragraphe avec la classe "exemple" et définit une marge de 20 px. La couleur d'arrière-plan est bleu clair. Définissez le remplissage. à 10px et définissez son attribut d'affichage sur l'élément en ligne.

Si vous exécutez le code ci-dessus dans le navigateur, nous constaterons que l'attribut margin est efficace pour les marges supérieure et inférieure des éléments en ligne, et l'élément paragraphe aura une marge de 20 px en haut et en bas.

Cependant, si nous essayons de définir les marges gauche et droite pour les éléments en ligne, nous constaterons que la valeur de marge définie n'aura aucun effet sur les éléments en ligne. Par exemple, essayez le code suivant :

.example {
  margin: 20px 50px; /* 不会对行内元素产生效果 */
}

Dans l'exemple de code, nous essayons de définir des marges haut/bas de 20 px et des marges gauche/droite de 50 px pour les éléments en ligne, mais le navigateur n'affiche pas ces marges.

Il est à noter que ce phénomène ne signifie pas que l'attribut margin est totalement invalide pour les éléments en ligne. Nous pouvons toujours obtenir des effets similaires à l'aide d'autres propriétés et techniques CSS, telles que les propriétés de remplissage, les propriétés d'affichage et les pseudo-éléments.

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!