10. Espacement, taille et position : le modèle de boîte

Les boîtes sont en place ; reste à décider ce qui les sépare, quelle place elles prennent et où elles se posent. Ce chapitre explique le modèle de boîte — la façon dont tout navigateur mesure un élément — puis parcourt trois sections de l’onglet Style qui en découlent : Espacement, Taille et Position. C’est le chapitre qui fait passer une page « qui marche » à une page aérée et solide.

10.1 — Le modèle de boîte : quatre couches

Pour un navigateur, tout élément d’une page — un titre, une image, un conteneur — est un rectangle composé de quatre couches emboîtées. Au centre, le contenu : le texte ou l’image. Autour, la marge interne (padding), un coussin d’espace qui appartient à la boîte. Puis la bordure (border), un trait facultatif. Enfin, la marge externe (margin), un espace qui repousse les voisins. Le CSS appelle cet ensemble le modèle de boîte (box model), et Elementor n’invente rien : chacun de ses réglages d’espacement correspond à l’une de ces couches.

Une conséquence pratique se lit sur la figure : l’arrière-plan d’une boîte colore le contenu et la marge interne, mais jamais la marge externe. Une carte à fond blanc avec 24 px de marge interne montre donc 24 px de blanc autour de son texte ; la même carte avec 24 px de marge externe reste collée à son texte et laisse simplement un vide autour d’elle. C’est le premier critère de choix : si l’espace doit être coloré comme la boîte, c’est du padding.

10.2 — Espacement : lier et délier les quatre côtés

Dans l’onglet Style d’un élément atomique, la section Espacement (Spacing) contient deux groupes de champs, Padding et Margin, chacun avec quatre valeurs : haut, droite, bas, gauche. Une petite icône de chaîne, à côté du groupe, lie les quatre côtés : tant qu’elle est active, une valeur saisie dans un champ se recopie dans les trois autres. Cliquez dessus pour délier et régler chaque côté séparément — c’est ce que l’on fait pour une section, où l’on veut 80 px en haut et en bas mais seulement 24 px sur les côtés.

Trois habitudes règlent 90 % des cas. Sur une section, du padding haut et bas (80 px sur ordinateur est une valeur courante) et un padding latéral d’au moins 20 à 24 px, pour que le texte ne touche jamais le bord d’un écran de téléphone. Sur une carte, du padding uniforme (24 à 32 px). Entre les cartes, jamais de marge : l’Écart du parent. Il reste peu de place pour la marge externe ; on s’en sert pour décoller un titre de son paragraphe (16 px en bas d’un titre, par exemple) ou pour un décalage ponctuel. Les valeurs négatives sont acceptées et permettent de faire chevaucher deux boîtes, mais elles se paient toujours sur mobile ; évitez-les tant que vous n’en avez pas un besoin précis.

10.3 — Les unités : dans quoi mesure-t-on ?

Chaque champ de taille ou d’espacement propose une unité, choisie dans un petit menu à droite du champ. Le débutant travaille en pixels, ce qui est raisonnable pour les espacements. Mais quelques autres unités valent la peine d’être comprises, parce qu’elles rendent la page plus souple.

10.4 — Taille : largeur, hauteur, minimum et maximum

La section Taille (Size) regroupe la largeur (Width), la hauteur (Height), leurs bornes minimale et maximale (Min / Max) et, en fin de section, le Débordement (Overflow). Par défaut, un conteneur prend toute la largeur de son parent et exactement la hauteur de son contenu ; un bouton ou une image prennent leur taille naturelle. La plupart du temps, vous ne toucherez qu’à deux champs : la largeur d’un enfant dans une rangée (en pourcentage) et la largeur maximale d’un contenu (1140 px pour une section, 720 px environ pour un paragraphe seul, afin de garder des lignes lisibles — le chapitre 13 y revient).

Ne fixez jamais une hauteur sur une boîte de texte

C’est l’erreur la plus fréquente, et la plus coûteuse. Sur votre écran, une carte de 220 px de haut contient parfaitement ses trois lignes de texte. Mais sur un téléphone, ces trois lignes en deviennent six ; le texte déborde alors de la carte et se superpose à l’élément suivant. Un texte plus long, un visiteur qui agrandit la police, une traduction : tout fait varier la hauteur d’un texte. La solution est toujours la même : laisser la hauteur libre, et si l’on veut une hauteur « au moins égale à », utiliser la hauteur minimale.

Deux autres valeurs méritent d’être connues. La largeur fit-content donne à une boîte exactement la largeur de son contenu, ni plus ni moins : c’est ce que l’on veut pour un badge ou un bouton isolé dans un conteneur en Colonne, qui sinon s’étirerait sur toute la largeur ; si votre liste d’unités ne la propose pas, elle se saisit comme valeur personnalisée. Le Débordement, enfin, décide de ce qui arrive quand un contenu dépasse : Visible (par défaut, il dépasse), Hidden (il est coupé — indispensable pour qu’une image respecte les coins arrondis de sa carte) ou Auto (une barre de défilement apparaît — presque toujours à éviter dans une page vitrine).

10.5 — Position : de statique à collante

La section Position répond à une question que le débutant ne se pose jamais tant que tout va bien : par rapport à quoi une boîte se place-t-elle ? Par défaut, la réponse est « dans le flux » : chaque boîte vient après la précédente, comme des mots dans une phrase. Les autres valeurs de position sortent une boîte de ce flux, en tout ou partie.

• Statique (Static) — la valeur par défaut. La boîte suit le flux et ignore les champs de décalage.
• Relative — la boîte garde sa place dans le flux, mais peut être décalée (haut, droite, bas, gauche) par rapport à cette place. Surtout, elle devient le point de référence de ses enfants en position absolue : c’est son usage principal.
• Absolue (Absolute) — la boîte est retirée du flux ; les voisines se comportent comme si elle n’existait pas. Elle se place aux coordonnées indiquées, mesurées depuis le parent le plus proche qui a une position autre que statique. C’est la position d’un badge sur une photo, d’une étiquette « Nouveau » sur une carte.
• Fixe (Fixed) — comme Absolue, mais mesurée depuis la fenêtre du navigateur : la boîte ne bouge pas quand on fait défiler. Usage : un bouton « Appeler » flottant en bas d’écran.
• Collante (Sticky) — la boîte suit le flux, puis, quand le défilement l’amène à la distance indiquée du bord, elle s’y accroche et reste visible. C’est ainsi qu’un en-tête reste à l’écran (chapitre 24). L’Éditeur atomique permet de coller sur chacun des quatre côtés.

Le champ Z-index complète la section : quand deux boîtes positionnées se chevauchent, celle dont le z-index est le plus grand passe devant. Des valeurs de 1 à 10 suffisent largement ; réservez les grands nombres aux fenêtres surgissantes. Notez que la Structure signale d’un marqueur les éléments en position absolue (Centre d’aide, page « Elementor Top Bar ») : un moyen rapide de les retrouver quand un élément « a disparu » de la toile.

10.6 — Position absolue et responsive : prudence

Un élément en position absolue ne pousse rien et n’est poussé par rien. Sur un écran large, cela permet des compositions élégantes ; sur un téléphone, où tout s’empile et s’allonge, le même élément vient recouvrir un texte ou sortir de l’écran. La règle du support est donc stricte : la position absolue est réservée aux éléments décoratifs et petits — un badge, une icône, une forme d’arrière-plan — jamais à un bloc de texte ni à une image de contenu. Le parent est toujours en Relative, les coordonnées sont petites (quelques dizaines de pixels), et l’on vérifie chaque point de rupture (chapitre 12). Pour tout ce qui est une vraie mise en page — deux colonnes, une image à côté d’un texte —, ce sont le Flexbox et la Grille qui font le travail, jamais des coordonnées.

1. Sélectionnez le parent de l’image du bandeau. Sur la page « Accueil », dans la Structure (Ctrl+I, Cmd+I sur Mac), cliquez sur le Bloc Div qui contient la photo. Dans Style › Position, choisissez Relative. Rien ne bouge : c’est normal, vous venez seulement de désigner le point de référence.
2. Créez le badge. Déposez un Bloc Div dans ce même parent, après l’image ; renommez-le « Badge 2009 ». Placez-y un Paragraphe avec le texte « Depuis 2009 ».
3. Positionnez-le. Sur « Badge 2009 », Style › Position : Absolue, Haut 16 px, Gauche 16 px, Z-index 2. Le badge saute dans le coin de l’image.
4. Dimensionnez-le. Dans Taille, largeur fit-content (ou laissez le Bloc Div en largeur automatique) pour qu’il ne s’étire pas. Dans Espacement, padding lié à 8 px puis délié : 8 haut et bas, 16 gauche et droite.
5. Habillez-le. Arrière-plan bois chaud #A8663C, texte blanc cassé #FAF7F2 (section Typographie), coins arrondis à 999 px dans Bordure pour obtenir une pilule (le chapitre 17 détaille ces réglages).
6. Contrôlez en tablette et en mobile (Ctrl+Shift+M). Le badge doit rester dans le coin de l’image, sans toucher au titre. Enregistrez.