Aller au contenu

Dimensions et espaces d'une boîte

Chaque élément HTML est contenu dans une boîte (un bloc). Pour comprendre le comportement des boîtes, il faut savoir ce que désigne chaque dimension utilisée.

Boîte

Par défaut, les propriétés width et height désignent la largeur et la hauteur du contenu de la boîte. Pour avoir les dimensions de la boîte complète, il faut donc ajouter la valeur de :

  • padding, dimensions entre le contenu et les bordures ;
  • border-width, taille des bordures de la boîte ;
  • margin, dimensions extérieures de la boîte.

Les propriétés précédentes peuvent être différenciées entre le haut (-top), le bas (-bottom), la gauche (-left) et la droite (-right).

Il est aussi possible de définir des dimensions minimum et maximum pour la largeur et la hauteur d'une boîte grâce aux propriétés min-width, max-width, min-height et max-height (détails à retrouver sur MDN).

Voir les différents éléments

En utilisant l'inspecteur du navigateur, on peut visualiser les marges des différents éléments. Essayez avec le bac à sable, en faisant clic droit puis Inspecter et sélectionnez l'onglet Mise en page sur la droite.

Bac à sable : Visualiser les différentes dimensions

Dans ce bac à sable, les dimensions sont en pixels et les valeurs haut-bas-gauche-droite sont identiques. Ne pas hésiter à tester des valeurs négatives pour les marges intérieures (padding) et/ou extérieures (margin).

Ci-contre, commencez par choisir les dimensions du contenu de la boîte. Ajoutez ensuite une bordure, un espace entre le contenu et la bordure puis un espace extérieur à la boîte.






Code CSS
p {                                /* Mise en forme des paragraphes */
    width: 360px;                  /* Largeur du contenu */
    height: 100px;                 /* Hauteur du contenu */
    border: 0px none #000000;      /* Épaisseur - Apparence - Couleur */
    padding: 0px;                  /* Espace "intérieur" */
    margin: 0px;                   /* Espace "extérieur" */
}

Exercice n°1

Compléter le code Css ci-dessous pour que :

  1. L'article ait une marge extérieure de 50 pixels et une marge intérieure de 20 pixels.
  2. Le titre h3 ait une marge intérieure gauche de 10 pixels et une marge extérieure basse de 10 pixels
  3. Les paragraphes aient une marge extérieure haute de 25 pixels
<!-- Partie html à ne pas modifier -->
<article>
    <h3> Un titre </h3>
    <p>
        A méditer :
        <q>Une fois qu'on a donné son opinion, il serait logique
        qu'on ne l'ait plus.</q>
    </p>
    <p>
        L'élément en-ligne <code>&lt;q&gt; &lt;/q&gt;</code> sert
        à baliser une citation courte dans la ligne.
    </p>
</article>

/* Partie css modifiable */
article {
    border: 1px dotted black;
}

h3 {
    border-left: 5px ridge;
    border-bottom: 5px ridge;
    color: grey;
}

Travail originel CC-BY-NC-SA : Nicolas Buyle-Bodin, Jean-Manuel Meny et Mcikaël Bordonaro. Autres modifications par Cédric Frayssinet et Maxime Chourré