Modèle de boîte CSS

Le modèle de boîte CSS décrit comment les éléments sont disposés de manière intuitive sur la page web.

Qu'est-ce que le modèle de boîte ?

Chaque élément visible contient un ou plusieurs cadres rectangulaires. Le modèle de boîte CSS décrit généralement comment ces cadres rectangulaires sont disposés sur la page web. Ces cadres peuvent avoir des propriétés différentes et peuvent interagir de différentes manières, mais chaque cadre a une zone de contenu ainsi qu'une marge, un rembourrage et un bord optionnels.

L'image suivante montre comment les propriétés CSS de marge, de rembourrage et de bordure déterminent l'espace occupable par l'élément sur la page web.

Largeur et hauteur de l'élément

Généralement, lorsque vous utilisez CSS largeurethauteurLorsque vous définissez la largeur et la hauteur d'un élément via des propriétés, en réalité, vous ne définissez que la largeur et la hauteur de l'espace de contenu de l'élément. La largeur et la hauteur réelles de la boîte d'élément dépendent de plusieurs facteurs.

L'espace réel que peut occuper l'élément de la boîte peut être calculé ainsi :

Les utilisations des différentes propriétés données dans les prochaines sections.