DEVENIR-WEBMASTER.COM Log In
 11
link W3C close

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

Visiter ma chaine Youtube

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

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.

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

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.

Mettre une valeur de largeur

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

Mettre une valeur de hauteur

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

Gerer l'overflow avec une barre de défilement

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

Cacher le débordement

Vous avez aussi la possibilité de laisser faire le navigateur

Gerer l'overflow de manière auto

# Comment régler le padding, le margin ? close

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

Régler le padding et le margin

# Comment gérer le border ? close

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

Choisir le style du border

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 l'épaisseur du trait du border

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

Choisir la couleur du trait du border

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

Le border en notation courte

# Border, margin, padding soyons plus précis close

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

# Padding et margin en notation courte avec plusieurs valeurs close

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

Le padding en notation courte à deux valeurs

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.

Le padding en notation courte à quatre valeurs
Ajouter un top, un right, un bottom ou un left