link W3C open

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 code un élément HTML il va occuper un espace sur un écran de visualisation. C'est de cet espace dont on parle.

Pour illustrer cette affirmation j'ai implanté un paragraphe avec un lien dedans. Ensuite en CSS j'ai demandé des bordures. On voit apparaître des boîtes.

Les bordures font apparaître des boites

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 deux choses :

  1. Les dimensions width et height correspondent aux dimensions du contenu.
  2. Ensuite on part de la bordure, du border, à l'intérieur se trouve la marge intérieure, le padding et à l'extérieur se trouve la marge extérieure le margin.

Ces conventions peuvent être changées en utilisant la propriété box-sizing.

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

Vous devez écrire des règles CSS pour contrôler la dimension de certaines de ces boîtes. Par exemple celles des éléments de type block.

Si vous mettez une contrainte sur la largeur la hauteur sera augmentée autant que nécessaire.

Si vous mettez une contrainte sur la hauteur et que vous diminuez la largeur vous allez déborder.

Le débordement peut être évité. Vous pouvez demander qu'une barre de scrolling soit mise en place.

Vous pouvez demander que le contenu qui dépasse soit caché.

Vous avez aussi la possibilité de laisser faire le navigateur

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

Avec des règles CSS vous pouvez régler le padding et le margin.

#4 Comment gérer le border ? open

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

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.

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.

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.

Ajouter un top, un right, un bottom ou un left