Le modèle de boîte en HTML et en CSS
#1
Pourquoi des boîtes ? De quelles boîtes parle-t-on ?
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 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.
Il faut se souvenir de trois choses :
- Les dimensions
widthetheightcorrespondent aux dimensions du contenu. - 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 lepaddinget à l'extérieur se trouve la marge extérieure que l'on appelle lemargin. - Ces conventions peuvent être changées en utilisant la propriété box-sizing.
#2
Comment dimensionner le contenu d'une boîte ?
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.
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.
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.
Je peux aussi demander que le contenu qui dépasse soit caché. Pour cela je mets la propriété overflow à la valeur hidden.
J'ai aussi la possibilité de laisser faire le navigateur. Pour cela je mets la propriété overflow à la valeur auto.
#3
Comment régler le padding, le margin ?
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.
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.
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 ?
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.
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
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.
#6
Padding et margin en notation courte avec plusieurs valeurs
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.
