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 alors que le paragraphe est un élément de type block.

J'ai déjà commencer à 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écie 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 1rem 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 coté sur lequel je veux travailler ici border-top et 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 quatres 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