Vous êtes ici : Accueil > Cours > CSS > Modèle de boîte CSS

Le modèle de boîte CSS c'est quoi ?

Le langage CSS repose sur un modèle de boîte (box model). En effet, un document HTML étant un ensemble d'éléments composé pour chacun d'une forme rectangulaire, CSS va donc permettre de définir la position ainsi que la taille de ces formes grâce à des propriétés liées au concept.

Ainsi, pourra t-on définir la hauteur et la largeur, les marges, l'espacement, la bordure, les dépassements, le contour...

La mise en forme et le positionnement, quant à eux, sont dictés par un ensemble de facteurs tels que les dimensions de la boîte, le type de boîte, le mode de rendu ... que nous allons voir dans cet article.

Propriétés des boîtes :

Généralement, on présente le modèle de boîte en CSS de cette manière :

Box model en CSS

Nous retrouvons donc les propriétés suivantes qui permettent de gérer le modèle de boîte en CSS :

  • - Les propriétés width et height ainsi que les propriétés attachées telles que min-width, max-width, min-height et max-height pour la gestion de la largeur et de la hauteur du contenu (content).
  • - La propriété raccourcie padding qui permet un espacement (ou rembourrage) à l'intérieur du contenu.
  • - La propriété raccourcie border pour la création d'une bordure autour du contenu.
  • - La propriété raccourcie margin pour l'espacement extérieur du contenu.

Gestion avancée du modèle de boîte :

D'autres propriétés vont servir à gérer le modèle de boîte.

Le cas du débordement

Ci-dessous, un exemple de débordement où nous avons défini une hauteur et une largeur fixes en pixels :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu hendrerit libero. Sed suscipit, lacus id cursus suscipit, turpis purus facilisis lectus, euismod consequat eros odio eget turpis.

Duis tristique dui lorem, porttitor aliquet nisl bibendum nec. Praesent volutpat facilisis lorem, vitae varius odio pretium sed.

Aussi, pour permettre au texte de ne pas dépasser la boîte, allons-nous utiliser la propriété overflow.



div{

width: 600px;
max-height: 150px;
overflow-y: auto;
border: .5rem solid blue;
padding: 1rem;
margin: 2rem auto;
background-color: #7A5FFF;
color: white
 
 }
 

Le cas du découpage du fond

L'arrière-plan (ou fond), qu'il s'agisse d'une couleur (avec la propriété background-color) ou d'une image (avec la propriété background-image) se situe en-dessous de la boîte et s'étend jusqu'à la limite extérieure du cadre (sous une bordure par exemple).

Ajoutée dans CSS Backgrounds and Borders Module Level 3, la propriété background-clip permet de gérer le découpage d'un arrière-plan via trois valeurs (une quatrième a été ajoutée dans le quatrième niveau).

Techniquement, comme la valeur initiale de la propriété background-clip est border-box, il est fort probable que vous n'utilisiez que les deux autres valeurs.

Le cas du contour

A ne pas confondre avec la bordure, le contour, qui s'applique avec la propriété outline, n'occupe pas d'espace et se situe au-dessus du contenu sans en changer la taille. A juste titre, le contour n'est donc pas pris en compte dans le modèle de boîte.

Mise en forme en CSS :

CSS va donc servir à la mise en forme visuelle d'une boîte ainsi qu'à la disposition de celle-ci dans le flux d'un document. Il existe différents types pour définir une boîte. Selon le type, le rendu visuel sera différent.

Types de boîte et disposition

Le type de boîte va dépendre de la valeur de la propriété display. Cette propriété permet d'indiquer le mode de rendu (ou d'affichage) d'un élément HTML.

NB : il existe une ambiguïté entre les deux langages CSS et HTML en ce qui concernant les éléments. En HTML (jusqu'à la version 4.01[1]), les éléments sont soit de type block soit de type inline et participent à la structure du document. Même chose côté CSS sauf qu'ils agissent sur le rendu visuel. Il est possible en CSS de changer le type d'un élément HTML, mais celui-ci restera toujours du même type en HTML.

Éléments de type block

On parle d'éléments de type block lorsque la valeur de la propriété display vaut : block, list-item ou table.

On peut noter plusieurs caractéristiques concernant un élément de type block :

  • - Il peut contenir à la fois d'autres éléments de type block, des éléments de type inline et/ou du texte (boîte de bloc anonymes).
  • - On peut lui spécifier une largeur et une hauteur. Dans le cas où aucune largeur n'est définie, il prend toute la largeur de son élément parent, déclenchant ainsi un retour automatique à la ligne.
  • - On peut également lui spécifier une marge ainsi qu'un rembourrage.
  • - Chaque élément de type block s'empile l'un au-dessus de l'autre, dans l'ordre du flux HTML.
  • - La propriété vertical-align ne s'applique pas.

Parmi les éléments de type block, on peut noter par exemple : p, div, ol, ul, li, h1, h2...

Ci-dessous, un exemple avec deux éléments de type block. Aucune largeur n'est spécifiée, on constate bien un retour à la ligne du second élément. De plus, chaque élément parent possède un autre élément de type block (élément HTML p). Un élément inline (span) apparaît (coloré) dans le second élément de type block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu hendrerit libero. Sed suscipit, lacus id cursus suscipit, turpis purus facilisis lectus, euismod consequat eros odio eget turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu hendrerit libero. Sed suscipit, lacus id cursus suscipit, turpis purus facilisis lectus, euismod consequat eros odio eget turpis.

Éléments de type inline

On parle d'éléments de type inline lorsque la valeur de la propriété display vaut : inline, inline-block ou inline-table.

  • - Il ne peut contenir que des éléments de type inline ou du texte.
  • - Il n'est pas possible de définir une largeur et une hauteur explicite. Par défaut, largeur et hauteur dépendent du contenu de l'élément.
  • - On peut appliquer des marges à gauche et à droite de l'élément mais pas en haut ni en bas. Mais aucune restriction concernant le rembourrage.
  • - Il s'inscrit dans le flux du texte. Il n'y a pas un retour à la ligne comme pour un élément de type block.
  • - Il prend en compte la propriété vertical-align.

Parmi les éléments de type inline, on peut noter : a, span, b, em, i, cite, button, code...

NB : l'élément a fait figure d'exception dans la mesure où il peut envelopper n'importe quel type de contenu, block comme inline ou les deux.

Éléments de type inline-block

Les éléments de type inline-block vont se comporter à la fois comme s'ils étaient de type block et de type inline, tout simplement. Il ressort de ce type de contenu deux problèmes majeurs :

  • - Un élément inline-block est dépendant du white-space (les espaces blancs avant et après n'importe quel élément HTML).
  • - L'alignement vertical sera affecté.

Ci-dessous, un exemple d'utilisation. Le premier menu est sans rendu d'affichage en CSS. Dessous, le même menu mais en utilisant le type de rendu inline-block sur les éléments li :

Quel est donc l'intérêt d'utiliser la valeur inline-block ?

On peut aisément placer plusieurs éléments de type block sur la même ligne horizontale sans avoir recours à la laborieuse propriété float. Il est plus facile également de définir une hauteur et une largeur tout en conservant le type inline de l'élément. Enfin, on peut ajouter des marges et/ou des rembourrages à un élément inline.

Les boîtes flottantes

A l'origine, la propriété float devait permettre de faire "flotter" des images à l'intérieur d'un bloc de texte, autrement dit l'idée était de retirer un élément (image) du flux normal pour laisser le texte couler autour. Or, cette propriété a été devoyée pour devenir un mode de rendu.

Mais inutile d'épiloguer sur cette mauvaise pratique, puisque révolue avec l'arrivée de nouveaux modèles de rendu (voir plus bas).

Ci-dessous, un exemple de bonne utilisation de la propriété float :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sed cursus enim. Nulla a scelerisque est. Suspendisse eleifend auctor iaculis. Aenean sit amet convallis urna, et hendrerit leo. Curabitur tortor augue, eleifend ac turpis sed, laoreet dignissim lorem. Quisque enim metus, pretium a lorem mollis, molestie elementum magna. Aenean at libero congue, dapibus orci nec, ultricies turpis. Nulla placerat euismod enim, sit amet consequat magna sodales in. Curabitur euismod imperdiet fringilla. Sed dictum, quam at viverra porttitor, dolor sapien ultricies nibh, et mattis erat dui eu lacus.

Voir également l'utilité de cette propriété en lisant cet article sur les formes CSS (CSS shapes).

Autres modèles de contenu

En plus des boîtes en ligne (inline layout) et des boîtes de bloc (bloc layout), il existe le modèle de contenu pour les tableaux (table layout).

La spécification CSS Display Model Level 3 définit plusieurs autres modèles de contenu qui peuvent être appliqués aux éléments. Ces modèles définissent des types de boîtes supplémentaires :

- Le modèle de contenu des boîtes flexibles (flexible box layout)

Il s'agit d'une méthode de disposition unidimensionnelle. Les boîtes flexibles gèrent donc une seule dimension à la fois : une ligne ou une colonne. De plus, les éléments d'une conteneur flexible peuvent être disposés dans n'importe quelle direction et étendre leurs dimensions.

- Le modèle de contenu à plusieurs colonnes (Multi-column layout)

Ce modèle permet de créer des boîtes de colonne entre la boîte englobante et le contenu qui s'apparente au modèle de contenu dans le monde de l'imprimerie.

- Le modèle de contenu en grille (Grid layout)

Contrairement au modèle de contenu des boîtes flexibles, Grid layout permet un rendu bi-dimensionnel d'une boîte (grille et rangée).

Positionnement :

On parle de positionnement lorsque l'on souhaite changer la disposition normale d'un élément dans le flux. On utilisera pour ce faire la propriété position. Elle possède plusieurs valeurs qui vont changer l'état de disposition de l'élément touché :

La valeur static

C'est la valeur par défaut. Rien à ajouter de particulier sur cette valeur puisqu'elle n'affecte aucun élément.

La valeur relative

Un élément ayant une position relative va être repositionné relativement par rapport à sa position d'origine.

Un exemple concret :

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un autre paragraphe. J'en avais assez d'être à ma place initiale alors j'ai changé d'air.

Pour changer la direction du paragraphe, nous avons utilisé les propriétés top et left. Il existe également les propriétés right et bottom.

La valeur absolute

Un élément positionné en absolu ne fait plus partie du flux normal du document. Il devient indépendant et n'affecte pas les autres éléments, structurellement parlant. On utilise avant tout ce positionnement pour les fenêtres d'informations (popup) ou l'affichage d'images (lightbox). Mais également pour tout un tas d'autres raisons.

Le positionnement absolu requiert lui-aussi les propriétés vues plus haut avec la positionnement relatif.

Reprenons l'exemple précédent et passons le second paragraphe en position absolue avec les mêmes propriétés/valeurs :

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un autre paragraphe. J'en avais assez d'être à ma place initiale alors j'ai changé d'air.

🤨 hum... où est passé le second paragraphe ? Bizarre. Non, en fait pas du tout ! Il faut savoir que contrairement à la position relative qui indique à l'élément la direction dans laquelle il doit se déplacer, en positionnement absolu l'élément change selon la distance indiquée par rapport à son contenant. Techniquement, le second paragraphe (vous ne le verrez pas, je l'ai rendu invisible, mais il est toujours présent dans le DOM) se trouve actuellement tout en haut de cette page à 20 pixels du haut de la page et à 80 pixels du bord gauche de la page. Pourquoi ? Tout simplement parce que le contenant ici se trouve être l'élément html.

Pour remédier à cela, nous allons devoir passer le bloc dans lequel se trouve l'élément p en position relative, ce qui aura pour conséquence de changer le contexte de positionnement. Le contenant est à présent l'élément div qui contient l'élément p.

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un paragraphe. Ma position par défaut est statique.

Je suis un autre paragraphe. J'en avais assez d'être à ma place initiale alors j'ai changé d'air.

On remarque bien la présence de notre élément p. Il empiète sur le premier paragraphe et dépasse du contenant mais cela est normal. Il suffira de faire quelques réglages (ajouter une hauteur au contenant, augmenter la distance...).

Cet exemple nous amène cepedant sur un point particulièrement important : le cas du z-index. La propriété z-index permet l'empilement d'éléments et ne fonctionne que sur des éléments positionnés.

Je suis un paragraphe. Ma position est absolue et je me trouve au-dessus de tout autre élément de l'élément parent.

Je suis un autre paragraphe en position absolue.

La valeur fixed

Même fonctionnement que le positionnement absolu, à la différence que le positionnement avec la valeur fixed fixe un élément par rapport au viewport (la fenêtre du navigateur).

La valeur sticky

[1] En HTML5, cette distinction binaire est remplacée par un ensemble plus complexe de catégories de contenu.

Votre navigateur est trop ancien pour afficher le contenu de ce site.