Apprendre CSS : Modèle de Boîtes

Comprendre le modèle de boîtes

Une page web est représentée par une succession et un empilement de boîtes appelées « blocs ».

Il est possible de modifier le style de ces boîtes via un ensemble de propriétés dédiées à leur :

• Affichage (display)
• Bordures (border)
• Espacements (margin et padding)
• Dimensions (width et height)

Affichage d’une boîte

On distingue deux grands types de blocs en fonction de leurs propriétés d’affichage. Un bloc est par défaut block ou inline.

Type block

Un élément de type block prend 100% de la largeur qui lui est allouée (par son parent). Un bloc va ainsi naturellement créer un retour à la ligne avant et après lui.

Quelques exemples :

<div>, <header>, <nav>, <article>, <section>, <footer>, <p>, <h1>, <table>, <form>…

<p>Je suis un block</p>

Type inline

Un élément de type inline prend la place nécessaire par son contenu.

Quelques exemples :

<span>, <strong>, <b>, <a>, <img>, <input>, <canvas>, <button>, <label>, <textarea>…

<a href="#">Je suis un inline</a>

Modifier le type d’affichage

La propriété CSS display permet de modifier l’affichage d’un bloc.

p {
	display: inline;
}

<p>Je suis un blo... ah non, un inline !</p>

Bordures

Style, épaisseur et couleur

Toute boîte HTML est délimitée par des bordures. Par défaut, ces bordures sont invisibles.

Il est possible de customiser les bordures d’une boîte avec les propriétés border-width, border-style et border-color.

Voici la liste des styles de bordures possibles.

<div id="a"></div>
<div id="b"></div>

#a {
	border-style: solid;
	border-color: black;
	border-width: 3px;
}
#b {
	border: solid black 3px;
}

Il est aussi possible d’appliquer une bordure sur un côté spécifique de la boîte (haut, bas, gauche ou droite).

border-top: dashed red 3px;

Arrondi

La propriété border-radius permet de définir un rayon visant à arrondir les bordures.

#a {
	border-radius: 20px;
}

Pour obtenir un arrondi parfait au niveau des bordures, il suffit de déclarer une valeur pour border-radius ≥ la hauteur de l'élément / 2.

border-radius: 20px créera un arrondi parfait si la hauteur de la boîte est au plus de 40px.

Pour appliquer un arrondi à un angle précis, il suffit de spécifier les 2 côtés formant l’angle.

selecteur {
	border-top-left-radius: 20px;
}

Espacements

Les espacements, aussi appelés « marges », permettent de définir des espacements à l’intérieur et à l’extérieur des bordures d’une boîte.

On les définit généralement en : px, em, rem, ou %.

Marge externe

Pour définir une marge à l’extérieur des bordures d’une boîte, on fait appel à la propriété margin.

#a {
	margin: 20px;
}

• 1 seule valeur pour la propriété margin : marges haut, droite, bas et gauche identiques
• 2 valeurs pour la propriété margin : marges haut/bas et droite/gauche
• 3 valeurs pour la propriété margin : marges haut, droite/gauche et bas
• 4 valeurs pour la propriété margin : marges indépendantes (si vous ne vous rappelez pas de l’ordre, retenez qu’il s’agit de l’ordre des aiguilles d’une montre, en partant de midi 🕒)

Marge interne

Pour définir une marge à l’intérieur des bordures d’une boîte, on fait appel à la propriété padding.

#a {
	padding: 20px;
}

• 1 seule valeur pour la propriété padding : marges haut, droite, bas et gauche identiques
• 2 valeurs pour la propriété padding : marges haut/bas et droite/gauche
• 3 valeurs pour la propriété padding : marges haut, droite/gauche et bas
• 4 valeurs pour la propriété padding : marges indépendantes (si vous ne vous rappelez pas de l’ordre, retenez qu’il s’agit de l’ordre des aiguilles d’une montre, en partant de midi 🕒)

On utilise généralement la propriété margin ou padding pour travailler sur plusieurs marges, mais il est possible de faire appel aux propriétés margin-top, margin-right, margin-bottom, margin-left et padding-top, padding-right, padding-bottom, padding-left pour les isoler.

Dimensions

Il est également possible de spécifier vous-même les dimensions de vos boîtes de type block.

Contrairement à un élément inline, un élément block a des dimensions précises. Il possède une largeur et une hauteur.

Largeur

La largeur d’une boîte peut être définie manuellement avec la propriété width. Cela permet de modifier le comportement par défaut d’un bloc occupant tout l’espace libre.

Cette largeur se définira en px ou %.

#demo {
	width: 50%;
}

On peut aussi définir une largeur minimale et maximale avec les propriétés min-width et max-width. C’est très pratique pour définir des dimensions « limites » dans l’élaboration d’un design responsive. Cette approche est très largement utilisée pour créer des conteneurs CSS.

Hauteur

La hauteur d’une boîte peut être définie manuellement avec la propriété height. Cela permet de modifier le comportement par défaut d’un bloc s’étirant verticalement en fonction de son contenu.

Cette largeur se définira en px ou %.

#demo {
	height: 200px;
}

On peut aussi définir une hauteur minimale et maximale avec les propriétés min-height et max-height. C’est très pratique pour définir des dimensions « limites » dans l’élaboration d’un design responsive.