Présentation du modèle de boîte CSS

Le modèle de boîte CSS (Box Model) réglemente la manière dont la boîte de l'élément traite le contenu de l'élément,le padding、la bordure et La marge de la manière.

Présentation du modèle de boîte CSS

Modèle de boîte CSS

La partie la plus intérieure de la boîte de l'élément est le contenu réel, entouré directement par le padding. Le padding présente le fond de l'élément. Le bord de la padding est la bordure. Au-delà de la bordure, il y a la marge, qui est par défaut transparente et ne cache pas aucun élément derrière elle.

Astuce :Le fond est appliqué à la zone composée du contenu et du padding, de la bordure.

Le padding, la bordure et la marge sont optionnels et leur valeur par défaut est zéro. Cependant, de nombreux éléments seront définis par les feuilles de styles de l'agent utilisateur. Vous pouvez couvrir ces styles de navigateur en définissant le margin et le padding de l'élément sur zéro. Cela peut être fait individuellement ou en utilisant un sélecteur universel pour configurer tous les éléments :

* {
  margin: 0;
  padding: 0;
}

Dans le CSS, width et height font référence à la largeur et à la hauteur de la zone de contenu. L'ajout de padding, de bordure et de marge n'affecte pas la taille de la zone de contenu, mais augmente la taille totale de l'élément.

Supposons que chaque côté de la boîte ait 10 pixels de marge extérieure et 5 pixels de padding intérieur. Si vous souhaitez que cette boîte d'élément atteigne 100 pixels, vous devez définir la largeur du contenu sur 70 pixels, comme dans l'image suivante :

Exemple de modèle de boîte CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

Astuce :Le padding, la bordure et la marge peuvent être appliqués à tous les côtés d'un élément ou à un côté seul.

Astuce :La marge extérieure peut être négative et doit souvent être négative.

Compatibilité du navigateur

Une fois que le DTD approprié a été configuré pour la page, la plupart des navigateurs afficheront le contenu selon l'image ci-dessus. Cependant, l'affichage d'IE 5 et 6 est incorrect. Selon la norme W3C, l'espace occupé par le contenu de l'élément est déterminé par la propriété width, tandis que les valeurs de padding et de border autour du contenu sont calculées séparément. Malheureusement, IE5.X et 6 utilisent leur propre modèle non standard en mode de compatibilité. La propriété width de ces navigateurs n'est pas la largeur du contenu, mais la somme de la largeur du contenu, du padding et de la bordure.

Il existe des méthodes pour résoudre ce problème. Mais la meilleure solution actuelle est d'éviter ce problème. C'est-à-dire, ne pas ajouter de marge interne ayant une largeur spécifiée aux éléments, mais essayer d'ajouter la marge interne ou la marge externe aux éléments parent et enfant.

Traduction des termes

  • element : élément.
  • padding : marge interne, certains documents le traduisent également par remplissage.
  • border : bordure.
  • margin : marge externe, certains documents le traduisent également par espace ou bord d'espace.

Sur codew3c, nous appelons uniformément padding et margin marge interne et marge externe. L'espace à l'intérieur de la bordure est la marge interne, et l'espace à l'extérieur de la bordure est la marge externe, facile à se souvenir, n'est-ce pas :）