Contenu, marge intérieure(padding), bordure, et marge

Le «modèle de boîte CSS» est un ensemble de règles qui déterminent les dimensions de chaque élément dans une page Web. Il donne à chaque boîte (en ligne et en bloc) quatre propriétés:

• Contenu (Content) – Le texte, l’image ou tout autre contenu multimédia dans l’élément.
• Marge Intérieure (Padding) – L’espace entre le contenu de la boîte et sa bordure.
• Bordure (Border) – La ligne entre le rembourrage et la marge de la boîte.
• Marge (Margin) – L’espace entre la boîte et les boîtes environnantes.

C’est 4 régles sont tout ce qu’un navigateur doit connaître pour rendre la boîte d’un élément. Le contenu est en HTML car il a une valeur sémantique. Le reste influe sur la présentation, il est donc défini par des régles CSS.

padding (marge intérieure)

Commençons par l’intérieur. Nous avons déjà travaillé sur le contenu, on va donc ce concentrer sur le « padding ». La propriété de padding … vous l’avez deviné … définit la marge intérieure pour l’élément sélectionné:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
}

Cela ajoute 50 pixels de chaque côté du titre <h1>. Notez comment la couleur d’arrière-plan se développe pour remplir cet espace. C’est toujours le cas pour le « padding » car il se trouve à l’intérieur de la bordure, et tout ce qui est à l’intérieur de la bordure a un fond.

Parfois, vous ne voulez styliser qu’un côté de l’élément. Pour cela, CSS fournit les propriétés suivantes:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
}

p {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

Vous pouvez utiliser n’importe quelle unité pour le padding d’un élément, pas seulement des pixels. L’unité em est particulièrement utiles pour que vos marges soit proportionnels à la taille de police de base.

formats sténographiques

La saisie de toutes ces propriétés peut être fastidieuse. Heureusement, CSS offre une autre forme «raccourci» de la propriété padding qui vous permet de régler le padding supérieur/inférieur et gauche/droite avec une seule ligne de code. Lorsque vous fournissez deux valeurs à la propriété padding, elles sont interprétées comme les valeurs de rembourrage verticales et horizontales, respectivement.

Cela signifie que notre règle précédente peut être réécrite comme suit:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
}

Alternativement, si vous fournissez quatre valeurs, vous pouvez définir le rembourrage pour chaque côté d’un élément individuellement. Les valeurs sont interprétées dans le sens des aiguilles d’une montre, en commençant par le haut:

Essayons cela en supprimant le rembourrage à droite de 10px de la règle précédente. Cela devrait nous donner 20 pixels en haut et en bas de chaque paragraphe, 10 pixels à gauche, mais aucun sur la droite:

p {
  padding: 20px 0 20px 10px;  /* Top  Right  Bottom  Left */
}

Que vous vouliez ou non utiliser les formes abrégées est en grande partie une question de préférence personnelle et de conventions d’équipe. Certains développeurs préférent la forme abrégée car elle est plus condensée, tandis que d’autres pensent que la forme longue est plus facile à comprendre en un coup d’œil (et donc plus facile à maintenir).

Bordures

Continuant notre voyage vers l’extérieur du centre du modèle de boîte CSS, nous avons la bordure: une ligne tracée autour du contenu et du remplissage d’un élément. La propriété border nécessite une nouvelle syntaxe que nous n’avions jamais vue auparavant. D’abord, nous définissons la largeur de trait de la bordure, puis son style, suivi de sa couleur.

Essayez d’ajouter une bordure autour de notre <h1> rubrique en mettant à jour la règle dans box-styles.css:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
  border: 1px solid #5D6063;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
}

Cela indique au navigateur de dessiner une fine ligne grise autour de notre rubrique. Remarquez comment la bordure se cogne juste à côté du rembourrage sans espace entre les deux. Et, si vous rétrécissez suffisamment votre navigateur pour que le titre soit divisé sur deux lignes, le remplissage et la bordure seront toujours là.

Dessiner une bordure autour de toute notre ligne la fait paraître un peu dans les années 90, alors pourquoi ne pas la limiter au bas de la page? Comme padding, il y a les variantes -top, -bottom, -left, et -right variants for the border pour la propriété border property:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
  border-bottom: 1px solid #5D6063;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
}

Les bordures sont des éléments de conception communs, mais ils sont également précieux pour le débogage. Lorsque vous n’êtes pas sûr de la manière dont une boîte est rendue, ajoutez-y une déclaration border: 1px solid red;. Cela montrera clairement le remplissage de la boîte, la marge, et les dimensions globales avec juste une seule ligne de CSS. Après avoir compris pourquoi votre matériel est cassé, supprimez simplement la règle.

Reportez-vous au Mozilla Developer Network pour plus d’informations sur les styles de bordure.

marges

Les marges définissent l’espace en dehors de la bordure d’un élément. Ou, plutôt, l’espace entre une boîte et ses boîtes environnantes. Ajoutons un peu d’espace au bas de chaque élément <p>:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
  border-bottom: 1px solid #5D6063;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
  margin-bottom: 50px;
}

Les marges et le rembourrage peuvent accomplir la même chose dans beaucoup de situations, ce qui rend difficile de déterminer lequel est le «bon» choix. Les raisons les plus courantes pour lesquelles vous choisiriez l’un ou l’autre sont:

• Le remplissage d’une boîte a un fond, tandis que les marges sont toujours transparentes.
• Le remplissage est inclus dans la zone de clic d’un élément, tandis que les marges ne le sont pas.
• Les marges s’effondrent verticalement, tandis que le remplissage ne le fait pas (nous en discuterons plus dans la section suivante).

marges sur les éléments en ligne

L’un des contrastes les plus frappants entre les éléments de niveau bloc et les éléments en ligne est la gestion des marges. Les boîtes en ligne ignorent complètement les marges supérieure et inférieure d’un élément. Par exemple, observez ce qui se passe lorsque nous ajoutons une grande marge à notre élément <strong>:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
  border-bottom: 1px solid #5D6063;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
  margin-bottom: 50px;
}

strong {
  margin: 50px;
}

Les marges horizontales s’affichent exactement comme on pourrait s’y attendre, mais cela ne modifie pas l’espace vertical autour de notre élément <strong>.

Si nous changeons margin pour padding, nous découvrirons que ce n’est pas exactement le cas pour le remplissage d’une boîte. Cela affichera le fond bleu; cependant, cela n’affectera pas la disposition verticale des boîtes environnantes.

La logique qui sous-tend cela revient au fait que les boîtes en ligne formatent des passages de texte à l’intérieur d’un bloc, et ont donc un impact limité sur la mise en page générale d’une page. Si vous voulez jouer avec l’espace vertical d’une page, vous devez travailler avec des éléments de niveau bloc (heureusement, nous savons déjà comment changer le type de boîte d’un élément ).

Donc, avant de vous frapper la tête contre le mur en essayant de comprendre pourquoi votre marge supérieure ou inférieure ne fonctionne pas, n’oubliez pas de vérifier votre propriété display.

Effondrement de la marge verticale

Une autre particularité du modèle de boîte CSS est l’effondrement de la marge verticale. Lorsque vous avez deux boîtes avec des marges verticales l’une à côté de l’autre, elles s’effondreront. Au lieu d’ajouter les marges comme vous pouvez vous y attendre, seul le plus grand est affiché.

Par exemple, ajoutons une marge supérieure de 25 pixels à notre <p>élément:

h1, p {
  background-color: #DDE0E3;    /* Gris clair */
}

em, strong {
  background-color: #B2D6FF;
  display: inline;
}

h1 {
  padding: 50px;
  border-bottom: 1px solid #5D6063;
}

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
  margin-top: 25px;
  margin-bottom: 50px;
}

strong {
  margin: 50px;
}

Chaque paragraphe doit avoir 50 pixels en bas et 25 pixels en haut. C’est 75 pixels entre nos <p>éléments, non? Faux! Il n’y aura toujours 50pxentre eux que parce que la plus petite marge supérieure s’effondre dans la plus grande.

Ce comportement peut être très utile lorsque vous travaillez avec de nombreux types d’éléments différents et que vous souhaitez définir leur disposition comme espace minimal entre les autres éléments.

Prévention de l’effondrement de la marge

Cela peut aussi être vraiment ennuyeux. Parfois, vous voulez empêcher les marges de s’effondrer. Tout ce que vous devez faire est de mettre un autre élément invisible entre eux:

<!DOCTYPE html>
<html lang='fr'>
  <head>
    <meta charset='UTF-8'/>
    <title>Les boites c'est facile!</title>
    <link rel='stylesheet' href='box-styles.css'/>
  </head>
  <body>
    <h1>Les titres sont des éléments de bloc</h1>

    <p>Les paragraphes sont des blocs. <em>Les éléments</em> em
       ne le sont pas. Ce sont des éléments <strong>inline</strong>.</p>
    <div style='padding-top: 1px'></div>
    <p>Les éléments de bloc définissent le flux du document HTML</p>
  </body>
</html>

Nous parlerons plus de l’ élément <div> dans la section suivante. La partie importante ici est que seuls les éléments consécutifs peuvent s’effondrer l’un dans l’autre. Mettre un élément avec une hauteur non nulle (d’où le padding-top) entre nos paragraphes les oblige à afficher à la fois la marge supérieure et la marge inférieure.

Rappelez-vous que le remplissage ne s’effondre jamais, donc une solution alternative serait d’utiliser padding pour espacer nos paragraphes au lieu de la propriété margin. Cependant, cela ne fonctionne que si vous n’utilisez pas le rembourrage pour autre chose (pour l’instant, nous le faisons, alors gardons l’option <div>).

Une troisième option pour éviter l’effondrement de la marge consiste à s’en tenir à une convention de marge inférieure ou supérieure uniquement. Par exemple, si tous vos éléments définissent uniquement une marge inférieure, ils ne peuvent pas s’effondrer.