À propos du bloc conteneur

La taille et la position d’un élément sont souvent affectées par son bloc conteneur. Le plus souvent, le bloc conteneur est la zone de contenu le plus proche du bloc au niveau de l’élément, mais ce n’est pas toujours le cas.

Quand un agent utilisateur (par exemple votre navigateur) présente un document, il génère une boîte pour chaque élément. Chaque boîte est divisée en quatre zones :

Zone de contenu (content)
Zone de remplissage (padding)
Zone de bordure (border)
Zone de marge (margin)

De nombreux développeurs croient que le bloc conteneur d’un élément est toujours la zone de contenu de son parent. Mais c’est faux ! Lisons un peu ...

Pourquoi est-ce si important d'identifier le bloc conteneur ?

La taille et la position d’un élément sont souvent affectées par son bloc conteneur. Les valeurs de pourcentage qui sont appliquées sur les propriétés width, height, padding, margin, et offset d’un élément en position absolue (c'est-à-dire, qui a comme valeur pour la position : absolute ou fixed) sont calculées à partir du bloc conteneur de l’élément.

Comment pouvons-nous identifier le bloc conteneur ?

Le procéder pour identifier le bloc conteneur dépendant entièrement de la valeur de l'élément position :

Si la propriété position est static ou relative, le bloc conteneur est formé par le bord de la zone de contenu de l’élément ancêtre le plus proche qui est un conteneur de bloc (par exemple un inline-block, bloc ou élément de liste) ou qui établit une mise en contexte (tel qu’un conteneur de table, flex conteneur, grille conteneur, ou du conteneur de bloc).
Si la propriété position est absolute, le bloc conteneur est formé par le bord de la boîte de remplissage de l’élément ancêtre le plus proche qui a une valeur position différente de static (fixed, absolute, relative ou sticky).
Si la propriété position est fixed, le bloc conteneur est établi par la fenêtre d’affichage viewport (dans le cas des milieux continus) ou la zone de la page (dans le cas des médias paginés).
Si la propriété position est absolute ou fixed, le bloc conteneur peut-être aussi être formé par le bord de la boîte de remplissage de l’élément ancêtre le plus proche qui possède ce qui suit :
1. une valeur transform ou perspective autre que none
2. une valeur will-change pour transform ou perspective
3. Une valeur de filtre autre que none ou une valeur will-change pour filtre (ne fonctionne que sur Firefox).

Note: Le bloc conteneur dans lequel la racine élément (<html>) se trouve est un rectangle que l'on appel bloc conteneur initial. Il a les dimensions de la fenêtre d’affichage (pour les milieux continus) ou la zone de page (pour les médias paginés).

Calcul la valeur des pourcentages depuis le bloc conteneur

Comme indiqué plus haut, lorsque certaines propriétés sont données en valeur pourcentage, la valeur calculée dépend du bloc conteneur de l’élément. Les propriétés qui fonctionnent de cette façon sont des propriétés de modèle de boîte et des propriétés de décalage :

Les valeurs height, top et bottom calculent les valeurs de pourcentage à partir de la hauteur du bloc contenant. Si la hauteur du bloc contenant dépend de son contenu, ces valeurs deviennent 0 lorsque le bloc contient une position relative ou static.
Les propriétés de largeur, de gauche, de droite, de remplissage et de marge calculent les valeurs de pourcentage de la largeur du bloc contenant.

Quelques exemples

Le code HTML pour tous les exemples sera :

<body>
  <section>
    <p>Ceci est un paragraphe!</p>
  </section>
</body>

Exemple 1

Dans cet exemple, le paragraphe est positionné de façon statique, son bloc conteneur est donc <section> parce qu’il est l’ancêtre le plus proche qui est un bloc conteneur.

<body>
  <section>
    <p>Ceci est un paragraphe !</p>
  </section>
</body>

body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%;   /* == 400px * .5 = 200px */
  height: 25%;  /* == 160px * .25 = 40px */
  margin: 5%;   /* == 400px * .05 = 20px */
  padding: 5%;  /* == 400px * .05 = 20px */
  background: cyan;
}

Exemple 2

Dans cet exemple, le bloc conteneur paragraphe est l'élément <body>, parce que <section> n'est pas un bloc conteneur et ne mets pas en place une mise en contexte.

<body>
  <section>
    <p>Ceci est un paragraphe!</p>
  </section>
</body>

body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%;     /* == half the body's width */
  height: 200px;  /* Note: a percentage would be 0 */
  background: cyan;
}

Exemple 3

Dans cet exemple, le bloc conteneur paragraphe est <section> parce que ce dernier est en position absolute. Le valeur en pourcentage du paragraphe est affectée par le padding de son bloc conteneur, quoique si la valeur box-sizing du bloc conteneur étaient border-box ce ne serait pas le cas.

<body>
  <section>
    <p>Ceci est un paragraphe!</p>
  </section>
</body>

body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
  background: cyan;
}

Exemple 4

Dans cet exemple, la position du paragraphe est fixed, son bloc conteneur est donc le bloc conteneur initial (sur les écrans, la fenêtre d’affichage). Ainsi, la dimension du paragraphe change selon la taille de la fenêtre du navigateur.

<body>
  <section>
    <p>Ceci est un paragraphe!</p>
  </section>
</body>

body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
  background: cyan;
}

Exemple 5

Dans cet exemple, la position de paragraphe est absolue, donc son bloc conteneur est <section>, qui est l’ancêtre le plus proche avec une propriété transform qui n’est pas none.

<body>
  <section>
    <p>Ceci est un paragraphe!</p>
  </section>
</body>

body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%;   /* == 200px */
  height: 25%;  /* == 40px */
  margin: 5%;   /* == 20px */
  padding: 5%;  /* == 20px */
  background: cyan;
}