Largeur (width) et hauteur (height) de la boite de contenu des éléments HTML

Tout contenu d’un élément HTML va prendre un certain espace dans une page, c’est-à-dire posséder une largeur et une hauteur. Cet espace pris, c’est-à-dire la largeur et la hauteur de ce contenu vont être représentées respectivement par les propriétés CSS width (largeur) et height (hauteur).

Dans cette leçon, nous allons étudier ces deux propriétés et apprendre à les manipuler.

 

L’impact du type d’affichage d’un élément sur ses dimensions

Pour comprendre comment fonctionnent les propriétés width et height et comment les manipuler il est avant tout nécessaire d’avoir une vue claire sur les types d’affichage principaux des éléments : l’affichage block (sous forme de bloc) et inline (en ligne).

En effet, je vous rappelle que les éléments HTML peuvent être affichées de deux grandes façons différentes : soit sous forme de bloc, soit en ligne.

Les dimensions par défaut du contenu des éléments HTML vont avant tout être déterminées par le type d’affichage des éléments : en effet, les éléments de type block occuperont par défaut toute la largeur disponible dans leur élément parent tandis que les éléments de type inline n’occuperont que la largeur nécessaire à leur contenu.

Vous pouvez ainsi déjà retenir ici que nous n’allons pas pouvoir modifier la taille de l’espace pris par le contenu des éléments de type inline avec les propriétés width et height : les valeurs qu’on va pouvoir définir vont tout simplement être ignorées.

En effet, le principe de base d’un élément de type inline est que l’espace pris par sa boite « contenu » soit toujours égal à l’espace strictement nécessaire à l’affichage de ce contenu.

Regardez l’exemple ci-dessous pour vous en convaincre. Je vous rappelle ici qu’un élément p possède un type d’affichage block tandis qu’un élément span possède un type d’affichage inline.

See the Pen Cours HTML CSS 5.2.1 by Pierre (@pierregiraud) on CodePen.

Comme vous pouvez le constater, les valeurs passées à width et à height sont ignorées pour mon span s1.

Notez bien ici que modifier la taille de la boite du contenu d’un élément de type block ne change pas les propriétés fondamentales de celui-ci. J’entends par là qu’un élément de type block commencera toujours sur une nouvelle ligne et ne viendra jamais se positionner à côté d’un autre élément de type block quelle que soit sa taille.

 

Les types de valeur des propriétés width et height et les problèmes de dépassement

Les propriétés width et height vont pouvoir accepter plusieurs types de valeurs :

• Des valeurs de type « longueur » qui vont être généralement exprimées en px ou en em ;
• Des valeurs en pourcentage, auquel cas le pourcentage donné sera relatif à la dimension de l’élément parent.

Problème de dépassement n°1 : l’élément dépasse de son parent

Pour bien identifier ce premier problème de dépassement, prenons immédiatement un exemple qui va également nous permettre de comprendre pourquoi il est généralement déconseillé de mélanger des unités fixes et relatives lorsqu’on définit des dimensions.

See the Pen Cours HTML CSS 5.2.2 by Pierre (@pierregiraud) on CodePen.

Dans cet exemple, la largeur de notre premier conteneur div class="d1" est définie de manière relative par rapport à son parent (qui est le body). La largeur du div va donc changer en fonction de la largeur de la fenêtre.

Ensuite, dans ce div conteneur, on spécifie une largeur pour notre premier paragraphe en unités absolues et fixes. Le problème ici va être que pour des fenêtres trop petites notre élément conteneur div va être plus petit que le paragraphe qu’il contient et cela va poser de nombreux problèmes de design.

Pour éviter ce genre de problèmes, la première règle est de bien faire attention lorsqu’on définit des dimensions aux différents types de valeurs utilisés et aux interactions entre ces différentes valeurs.

Ensuite, afin d’être certain que le design général de notre page ne sera pas impacté, on peut également utiliser la propriété overflow et en particulier sa valeur hidden sur l’élément parent. Cela va avoir pour effet de tronquer tout le contenu qui dépasse de l’élément. Si l’on souhaite que le contenu reste accessible, on peut utiliser overflow : scroll qui va proposer une barre de défilement dans l’élément parent.

See the Pen Cours HTML CSS 5.2.3 by Pierre (@pierregiraud) on CodePen.

Problème de dépassement n°2 : le contenu dépasse de l’élément

Un autre problème de dépassement courant va être le problème « contraire » au précédent, à savoir le cas où le contenu de mon élément dépasse de sa boite.

Ce problème va survenir si on définit une taille trop petite pour la boite de contenu de l’élément par rapport au contenu de l’élément.

Dans ce cas-là, il va falloir utiliser la propriété overflow sur l’élément en soi afin que le contenu qui dépasse soit caché.

See the Pen Cours HTML CSS 5.2.4 by Pierre (@pierregiraud) on CodePen.

Problème de dépassement n°3 : l’élément dépasse globalement de son parent

Une autre erreur couramment faite se situe dans la mauvaise compréhension du modèle des boites. En effet, il faut bien ici se rappeler que les propriétés width et height ne servent qu’à définir les dimensions de la boite liée au contenu d’un élément.

A ces dimensions vont venir s’ajouter les tailles des marges intérieures, des bordures et celles des marges extérieures pour former la taille totale de l’élément. Ainsi, si l’on ne fait pas attention, on peut très rapidement se retrouver avec des éléments enfants plus grands et qui vont dépasser de leur parent.

Imaginons par exemple qu’on fixe la largeur d’un élément enfant à 100% de celle de son parent. Si on attribue ensuite une quelconque marge interne, bordure, ou marge externe à l’élément, celui-ci va dépasser de son élément parent.

See the Pen Cours HTML CSS 5.2.5 by Pierre (@pierregiraud) on CodePen.