L'option la plus courante est de ne pas spécifier la hauteur, qui est alors déterminée par la taille du contenu et la largeur de l'élément : c'est le comportement par défaut. Il y a des situations, cependant, où on
désire une élément de hauteur donnée. Ceci se fait en utilisant la propriété height :
| height | longueur | pourcentage | auto |
On peut spécifier une longueur en pixels ou en cadratins ; lorsqu'on utilise un pourcentage, c'est relativement à la hauteur de l'élément parent. La valeur auto correspond au comportement
par défaut. Il est à noter que si on spécifie la hauteur en pourcentage et si l'élément parent n'a pas de hauteur ou de hauteur maximum définie, le résulat sera le même que por la valeur auto.
Si on impose une hauteur, il se peut que la taille de l'élément ne soit pas suffisante pour accomoder son contenu. Cela peut conduire au phénomène de débordement (overflow en anglais). La propriété
overflow est utilisée pour gérer ce phénomène :
| overflow | visible | hidden | scroll | auto |
Lorsque la valeur est visible, le contenu qui déborde de l'élément aparait sur la page web ; dans le cas de la valeur hidden (caché.e), au contaire, ce contenu
est masqué. Les valeurs scroll et auto permettent de faire défiler le contenu caché Dans le cas de scroll, on a
deux barres de défilement (une horizontale et une verticale) ; dans le cas auto, certains navigateurs ne fournissent qu'une barre de défilement verticale.
Les dimensions des éléments en ligne sont déterminées par leur contenu : on ne peut donc pas les spécifier. Par contre, il est possible de les doter d'une marge interne et d'un cadre.
Il faut être prudent avec les valeurs qu'on donne à padding-top, padding-bottom, border-top et border-
bottom, car si ces valeurs sont trop grandes,
il y aura interférence avec les éléments situés au dessus et en dessous.
Il est également possible de munir les éléments en ligne d'une marge externe à gauche et à droite.