link W3C close

Le modèle de boîte en HTML et en CSS

#1 Pourquoi des boîtes ? De quelles boîtes parle-t-on ? open

Lorsque l'on implante un élément HTML dans une page web, il occupe un espace, qui a la forme d'une boîte rectangulaire sur l'écran de visualisation. Pour illustrer cette affirmation, j'ai implanté un paragraphe avec un lien dedans. Ensuite, en CSS, j'ai demandé des bordures. Vous pouvez voir apparaître des boîtes rectangulaires.

Une remarque à propos de la taille de ces boîtes. Vous pouvez constater, ci-dessous, que la boîte qui correspond au lien a pris la taille de son contenu textuel, alors que la boîte qui correspond au paragraphe occupe toute la largeur de l'écran. Ceci vient du fait, que le lien est un élément de type inline, tandis que le paragraphe est un élément de type block.

J'ai déjà commencé à parler de cela dans le tutoriel Débuter en HTML.

Et je vous explique tout ça en détails dans le tutoriel Les éléments inline, block ou inline-block 😃.

Les bordures font apparaître des boites
Tester le code

Les caractéristiques géométriques de ces boîtes sont données sur le schéma ci-dessous. Les noms padding, border, margin, width et height sont les noms des propriétés CSS associés à ces caractéristiques géométriques.

Le modèle de boîte

Il faut se souvenir de trois choses :

  1. Les dimensions width et height correspondent aux dimensions du contenu.
  2. Ensuite, regardez le schéma ci-dessus. On part de la bordure, le border, à l'intérieur se trouve la marge intérieure, que l'on appelle le padding, et à l'extérieur se trouve la marge extérieure, que l'on appelle le margin.
  3. Ces conventions peuvent être changées en utilisant la propriété box-sizing.

#2 Comment dimensionner le contenu d'une boîte ? open

Vous pouvez contrôler les dimensions des boîtes qui correspondent à des éléments HTML de type block. Pour cela, vous devez écrire des règles CSS et connaître les noms et le fonctionnement de certaines propriétés CSS. C'est ce que nous allons voir ci-dessous, en manipulant un élément div qui est un élément de type block. Cet élément a la particularité de n'avoir aucune propriété de positionnée par défaut par la feuille de style du navigateur.

Ci-dessous, je mets une contrainte sur la largeur de la boîte, en utilisant la propriété width. Je constate que, la hauteur sera augmentée autant que nécessaire, si je rétrécis la taille de la fenêtre du navigateur.

Tester le code

Maintenant, je mets une contrainte sur la hauteur. Pour cela, j'utilise la propriété height et je lui donne la valeur de 100px. Si je diminue la largeur de la fenêtre, je constate que le contenu déborde.

Tester le code

Je peux éviter ce débordement. Je peux demander qu'une barre de scrolling soit mise en place. Pour cela, je mets la propriété overflow à la valeur scroll.

Tester le code

Je peux aussi demander que le contenu qui dépasse soit caché. Pour cela, je mets la propriété overflow à la valeur hidden.

Tester le code

J'ai aussi la possibilité de laisser faire le navigateur. Pour cela, je mets la propriété overflow à la valeur auto.

Tester le code

#3 Comment régler le padding, le margin ? open

Avec une règle CSS, vous pouvez régler le padding, que l'on appelle aussi la marge intérieure (* intérieure par rapport à la bordure). Si je mets qu'une seule valeur, comme je l'ai fait ci-dessous padding:3rem;, cette valeur est utilisée pour les quatres côtés. A savoir, le padding du dessus qui a pour nom de propriété padding-top, le padding de droite qui a pour nom de propriété padding-right, le padding de dessous qui a pour nom de propriété le padding-bottom et le padding de gauche qui a pour nom de propriété le padding-left.

Tester le code

Avec une autre règle CSS, vous pouvez régler le margin que l'on appelle aussi la marge extérieure (* extérieure par rapport à la bordure). Ici aussi, j'ai fixé les quatre valeurs en même temps, soit margin-top, margin-right, margin-bottom et margin-left.

Tester le code

Comme unité, j'ai utilisé des rem. Vous avez une explication détaillée sur ce que sont les rem dans le tutoriel sur Les textes. Pour faire court, si la police par défaut de votre navigateur est réglée sur Taille moyenne (sur Chrome) alors 1 rem vaut 16 pixels.

#4 Comment gérer le border ? open

Choisir la bordure avec la propriété border-style.

Tester le code

Vous avez ci-dessous, l'ensemble des styles disponibles. Attention, pour certains styles, il faut une épaisseur minimum pour pouvoir visualiser l'effet de style. Par exemple, ne demandez pas un style "double" avec une épaisseur de bordure d'un seul pixel.

Les styles du border

Choisir l'épaisseur du trait de la bordure avec la propriété border-width.

Choisir la couleur du trait de la bordure avec la propriété border-color.

Vous pouvez tout choisir en un seul coup en utilisant la notation courte.

#5 Border, margin, padding soyons plus précis open

Vous pouvez travailler sur un seul côté de la bordure ou sur un seul côté d'une marge. Bien sûr, vous devrez préciser lequel.

Vous avez un exemple ci-dessous, avec le côté supérieur sur lequel je viens ajuster l'épaisseur du trait supérieur. Au niveau du nom de la propriété, je désigne d'abord le côté sur lequel je veux travailler, ici border-top. Puis, je concatène avec la propriété sur laquelle je veux agir, ici width. Ce qui me fait border-top-width.

Tester le code
Choisir de travailler juste sur le top

#6 Padding et margin en notation courte avec plusieurs valeurs open

Padding et margin. Avec deux valeurs, on choisit le top/bottom et le left/right.

Tester le code Tester le code

Padding et margin. Avec quatre valeurs, on choisit le top, le right, le bottom et le left. Dans le sens du schéma ci-dessous.

Tester le code Tester le code
Ajouter un top, un right, un bottom ou un left