Maison > interface Web > tutoriel CSS > le corps du texte

Raisons et solutions pour que la marge ne fonctionne pas en CSS

不言
Libérer: 2018-11-27 10:40:39
original
21201 Les gens l'ont consulté

La marge est un attribut qui spécifie l'espacement entre les éléments, mais les marges ne peuvent pas être spécifiées pour les éléments en ligne. Cet article vous présentera les raisons pour lesquelles la marge ne fonctionne pas dans CSS et Solution.

Les raisons pour lesquelles la marge ne fonctionne pas

Pour les débutants, vous pouvez souvent constater que même si vous définissez l'attribut margin, cela ne fonctionne pas.

Avant de comprendre la marge, jetons d'abord un coup d'œil au modèle de boîte

Raisons et solutions pour que la marge ne fonctionne pas en CSS

La raison pour laquelle la marge ne fonctionne pas est souvent parce que l'affichage n'est pas pris en compte : display:block" ou "display:inline".

Regardons des exemples précis

HTML

<h3>这是一个内联块</h3>
Copier après la connexion

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  text-align:center;
  margin:0 auto;
}
Copier après la connexion

L'effet d'affichage sur le navigateur est le suivant :

Raisons et solutions pour que la marge ne fonctionne pas en CSS


" margin: 0 auto ;" ne fonctionne pas pour le bloc en ligne.

Même si "inline-block" peut être spécifié en utilisant d'abord une valeur numérique, le centrage à l'aide de "margin: 0 auto;" ne fonctionne pas.

"text-align: center;" ne fait pas de l'élément parent le sélecteur

La règle de base de "text-align: center;" est "le sélecteur est l'élément parent". Dans l'exemple ci-dessus, si vous souhaitez le centrer, vous devez créer un élément parent.

Une fois que vous avez compris ce qui précède, vous pouvez le résoudre.

HTML

<h3>这是一个内联块</h3>
Copier après la connexion

CSS

h3{
  display:inline-block;
  background:#ffff00;
  width:12em;
  margin:0 auto;
}
.wrap{
  text-align:center;
}
Copier après la connexion

L'effet est le suivant :

Raisons et solutions pour que la marge ne fonctionne pas en CSS

Cet article se termine ici. Pour plus d'informations sur l'attribut margin, vous pouvez prêter attention au Tutoriel vidéo CSS sur le site PHP chinois pour un apprentissage plus approfondi ! ! !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal