Modèle des boîtes

Introduction

Chaque élément HTML représenté dans la zone d'affichage de votre navigateur engendre une boîte.

• deux grandes catégories de balises:
  • les balises de type "boîtes bloc";
    servent à identifier les parties entières de texte : titres, paragraphes, tableaux, listes, citations, etc.
  • les balises de types "boîtes en-ligne"
• succession
  • les boîtes bloc se placent toujours l'une en dessous de l'autre par défaut
  • les boîtes en-ligne se placent toujours l'une à côté de l'autre
• emboîtement
  • Une boîte bloc peut contenir des boîtes bloc ou des boîtes en-ligne et avoir une dimension (largeur, hauteur).
  • Une boîte en-ligne ne peut contenir que des boîtes en ligne.
  • Exemple :
    Code CSS :

    <div style="background-color:DarkSeaGreen">
      Du texte
      <p style="border: solid 1px green; background-color:DarkSalmon">
        Plus de texte
      </p>
    </div>

    Dans le navigateur :
    Du texte

    Plus de texte

    La boîte bloc div contient la boîte anonyme en-ligne ("Du texte") et la boîte en-ligne de p.
• La plupart des propriétés sont réservées aux boîtes bloc. Par exemple, une boîte en-ligne ne pourra pas posséder de dimensions propres.

Modèle de boîte

• Une boîte CSS est constituée :
  • d'un contenu (le texte d'un paragraphe par exemple)
  • d'un remplissage (padding) : l'espace entourant le paragraphe)
  • d'une bordure (border) : encadrement du paragraphe
  • d'une marge (margin) : espace entourant le tout
• représentation graphique de boîtes :
  Marge

  Bordure

  Espacement

  Contenu
  Les lignes bleue, verte, brune et noire indiquent les bords de la marge, de la bordure, de l'espacement et du contenu.
• Les propriétés CSS permettent de déterminer :
  • les dimensions de la zone de contenu, son arrière-plan (image, couleur) et sa couleur d'avant-plan
  • les dimensions, la couleur et le style des bordures
  • les dimensions du remplissage
  • les dimensions de la marge
  Dans les trois derniers quatre cas, il est possible de spécifier les propriétés mentionnées pour les parties gauche, droite, haute et basse.

Marge

Les propriétés margin-top, margin-right, margin-bottom, margin-left définissent la distance entre chaque côté de l'élément en question et l'élément avoisinant.

Exemple :

Code CSS :

body {
  margin-top: 50px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 30px;
}

Dans le navigateur.

Exemple :

Code CSS :

<p style="border:1px dotted;margin-top: 0px; margin-right: 60px; margin-bottom: 15px; margin-left: 30px;">
  Un paragraphe avec les marges : 0px, 60px, 15px, 30px.
</p>
<p style="border:1px dotted;margin: 0px 100px 15px 150px">
  Un paragraphe avec les marges : 0px, 100px, 15px, 150px.
</p>
<p style="border:1px dotted;margin: 15px 100px 15px 150px">
  Un paragraphe avec les marges : 15px, 100px, 15px, 150px.
</p>
<p style="border:1px dotted;margin: 30px 100px 15px 150px">
  Un paragraphe avec les marges : 30px, 100px, 15px, 150px.
</p>

Dans le navigateur :

Observez que les marges de boîtes avoisantes ne s'additionnent pas.

Espacement

Les propriétés padding-top, padding-right, padding-bottom, padding-left définissent la distance interne entre la bordure et le contenu de l'élément.

Exemple :

Code CSS :

<p style="border:1px dotted;padding: 8px">
  Un paragraphe avec l'espacement : 8px, 8px, 8px, 8px.
</p>
<p style="border:1px dotted;padding: 5px 0px 0px 3px">
  Un paragraphe avec l'espacement : 5px, 0px, 0px, 3px.
</p>

Dans le navigateur :