Utiliser le modèle des boites CSS

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, Use Box Model For Easier Widths.

Dans cet article nous allons voir une petite astuce pour modifier la taille des éléments HTML en CSS. Il y a plusieurs choses qui définissent la taille d'un élément comme sa largeur, les marges intérieures ou encore les bordures.

Taille totale = largeur + marges intérieures + bordures.

Cela signifie que si la largeur de votre élément est de 500px avec une marge intérieure de 50px et une bordure de 10px, la taille totale sera alors de 620px.

620px = 500px + (50px * 2) + (10px * 2).

Ce calcul complique un peu la mise en page lorsqu'elle est un peu complexe, si vous souhaitez modifier les marges intérieures ou encore les bordures à l'avenir, il faudra également modifier la largeur de l'élément.

Il existe une propriété CSS box-sizing qui peut simplifier ce calcul. En effet en utilisant box-sizing avec la valeur border-box les marges intérieures ainsi que les bordures seront incluses dans la largeur de votre élément. Cela change donc le calcul présenté ci-dessus.

div {
	box-sizing: border-box;
	}

La taille totale est donc maintenant l'addition de la largeur, des marges intérieures et des bordures de l'élément.

Taille totale = (largeur - marges intérieures - bordures) + marges intérieures + bordures.

Si nous reprenons le même exemple, un élément dont la largeur est de 500px avec des marges intérieures de 50px et une bordure de 10px aura une taille totale de 500px.

500px = 380px + (50px * 2) + (10px * 2).

Si vous préférez cette façon de procéder, il est possible de l'appliquer automatiquement à tous vos éléments.

* {
     -moz-box-sizing: border-box;
     -webkit-box-sizing:
     border-box; box-sizing: border-box;
}

Vous penserez peut-être qu'utiliser le sélecteur * ralentira le chargement du CSS. Paul Irish a mis en évidence après une série de tests que l'utilisation de ce sélecteur ajoute une charge de 4 % seulement, ce qui est négligeable.

La propriété box-sizing est supportée par tous les principaux navigateurs.

Internet Explorer la supporte depuis la version 8.
Firefox la supporte depuis la version 2 mais uniquement avec le préfixe -moz.
Chrome la supporte en version préfixée (-webkit) jusqu'à la version 9, et en version non préfixée pour les versions supérieures.

Pour rester au courant des évolutions du support des navigateurs, vous pouvez consulter ce lien : http://caniuse.com/css3-boxsizing.

Nous avons vu dans ce tutoriel une nouvelle méthode pour définir la taille de vos éléments HTML en CSS. Cette méthode simplifie les calculs lors d'une mise en page complexe, en intégrant les marges intérieures et les bordures dans la taille définit en CSS.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également zoom61 pour sa relecture orthographique.