# Espacer vos blocs

Cet article explique où poser l’espace d’une mise en page : la marge intérieure sur le conteneur, la marge sur le bloc et l’écart entre les enfants d’un conteneur. Une carte ou une section réglée ainsi reste propre quand vous retirez, ajoutez ou déplacez un bloc.

## Avant de commencer

- Les espacements se choisissent sur l’échelle de votre site, un curseur à crans. Chaque cran affiche sa valeur, par exemple 16px.
- La même échelle sert à la marge intérieure, à la marge et à l’écart. Changer la valeur d’un cran change tous les blocs qui l’utilisent.
- Les valeurs citées ici sont celles de l’échelle livrée avec Lovely Render. Un design du catalogue peut agrandir les grands crans de votre site : le raisonnement reste le même.

## Les trois réglages d’espace

| Réglage | Où | Espace réglé |
| --- | --- | --- |
| **Marge intérieure** | Onglet **Styles**, panneau **Taille et espacement**, section **Espacement** | Entre le bord du bloc et ce qu’il contient. |
| **Marge** | Au même endroit | Entre le bloc et ses voisins. |
| **Écart** | Onglet **Réglages**, panneau **Mise en page flex** ou **Mise en page en grille** | Entre les enfants d’un conteneur en flex ou en grille, jamais avant le premier ni après le dernier. |

## Régler les marges d’un bloc

1. Sélectionnez le bloc et ouvrez l’onglet **Styles** de l’inspecteur.
2. Ouvrez le panneau **Taille et espacement** et descendez jusqu’à la section **Espacement**.
3. Sous **Marge intérieure**, déplacez le premier curseur pour le haut et le bas, le second pour la gauche et la droite.
4. Sous **Marge**, réglez de même l’espace autour du bloc. La page se met à jour à chaque cran.

![La section Espacement d’une carte : la marge intérieure à 24px en haut et en bas comme à gauche et à droite, avec les boutons Modifier et Nouveau, puis la marge à 0 et le bouton Auto. Chaque curseur montre les crans de 0 à 128px.](https://static.lovelyrender.com/uploads/2026/10/947-doc-pages-espacement.png)

Chaque axe se règle d’un seul curseur tant que ses deux côtés sont liés. L’icône à droite du curseur, **Délier les côtés**, donne un curseur à chaque côté. **Lier les côtés** les réunit.

Le bouton **Auto**, sur la marge de gauche et de droite, centre le bloc dans son parent. Donnez au bloc une largeur maximale pour que le centrage se voie.

Le cran 0 retire l’espace. La marge intérieure et la marge se règlent par état et par écran, comme tout réglage de l’onglet **Styles** : [Se repérer dans l’éditeur](https://lovelyrender.com/fr/documentation/editeur/) explique les deux rangées.

## Créer ou modifier un cran

- Le bouton **Nouveau** (+), à côté de **Marge intérieure** ou de **Marge**, crée un cran. Lui et le crayon sont réservés aux administrateurs du site. Le formulaire demande sa valeur dans le champ **Espacement** et son unité : `px`, `em`, `rem` ou `%`. Sur tous les curseurs du site, le cran prend sa place dans l’ordre des valeurs.
- Le bouton **Modifier** (crayon) change la valeur du cran que porte le dernier côté réglé. Le formulaire rappelle **Vos changements s’appliqueront à tous les blocs qui s’en servent.** Le crayon n’apparaît pas quand ce côté ne pose aucun cran.
- Une valeur n’existe qu’une fois. Un cran à une valeur déjà prise est refusé avec un message comme **16px existe déjà. Choisissez plutôt cette valeur.** Prenez alors ce cran sur le curseur.

Un `%` est une part de la largeur du bloc parent. En écart entre les rangées, il ne donne rien : la hauteur n’est pas connue.

**Conseil :** Pour ne changer que le bloc sélectionné, choisissez un autre cran sur le curseur. Le crayon change le cran partout où il sert.

## L’échelle livrée avec votre site

| Cran | Valeur | Variable CSS |
| --- | --- | --- |
| `2xs` | 2 px | `--spacing-2xs` |
| `xs` | 4 px | `--spacing-xs` |
| `s` | 8 px | `--spacing-s` |
| `m` | 16 px | `--spacing-m` |
| `l` | 24 px | `--spacing-l` |
| `xl` | 32 px | `--spacing-xl` |
| `2xl` | 64 px | `--spacing-2xl` |
| `3xl` | 128 px | `--spacing-3xl` |

Un cran garde son nom quand sa valeur change : `m` reste `m` à 20 px. Les crans livrés se modifient mais ne se suppriment pas. La variable CSS sert à [Ajouter du CSS avancé](https://lovelyrender.com/fr/documentation/css-avance/).

## Choisir des multiples de 8

Les crans de 8 px et plus sont des multiples de 8. Les crans de 2 et 4 px en sont des fractions.

- 16 px est la taille de texte par défaut des navigateurs. Un espacement de 16 px se lit comme un blanc naturel entre deux idées.
- Un multiple de 8 se partage sans reste : 16 se partage en 8 puis en 4. La moitié de 15 tombe entre deux pixels : deux blocs qui devraient s’aligner se décalent d’un pixel.
- Un multiple de 8 reste entier sur un écran haute densité, qui multiplie les pixels par 1,5 ou par 2.

Pour donner plus d’air, passez au cran suivant plutôt qu’à une valeur entre deux.

## Placer l’espace sur le bon bloc

Chaque bloc porte l’espace qui le concerne. Le conteneur porte sa marge intérieure, l’espace entre son bord et son contenu. Le bloc porte sa marge, l’espace qui le sépare de ses voisins.

Par exemple, une carte avec une marge intérieure de 16 px contient un paragraphe avec une marge de 16 px. Le texte est à 32 px du bord. Si vous retirez le paragraphe, la carte garde ses 16 px et reste propre.

Le même principe vaut pour une suite de blocs. Dans une carte d’article, le titre, la ligne de date et l’extrait portent chacun leur marge. Vous retirez la date sans toucher au reste : son espace part avec elle.

**Attention :** Ne faites pas porter l’espace d’un ensemble à un seul de ses blocs. Une grande marge en haut d’un titre qui sert en réalité de marge intérieure à la carte disparaît avec le titre. Le contenu colle alors au bord.

Dupliquée puis privée de son titre, une carte réglée ainsi reste juste.

## Espacer les enfants d’un conteneur

1. Sélectionnez un conteneur en **Flex** ou en **Grille**.
2. Dans l’onglet **Réglages**, ouvrez le panneau **Mise en page flex** ou **Mise en page en grille**.
3. Sous **Écart**, réglez le premier curseur pour l’espace entre les colonnes et le second pour l’espace entre les rangées.

![Le panneau Mise en page en grille d’un conteneur : les préréglages, les onglets des écrans, le mode de grille, l’écart à 36px entre les colonnes et entre les rangées, puis l’alignement des éléments et du contenu.](https://static.lovelyrender.com/uploads/2026/10/950-doc-pages-ecart.png)

L’icône à droite d’**Écart**, **Personnalisé par appareil**, règle l’écart dans chaque onglet d’écran du panneau.

L’écart se combine avec les deux autres réglages. La marge intérieure règle l’espace avec le bord du conteneur et l’écart celui entre les enfants. La marge d’un enfant s’ajoute et part avec lui.

| Disposition du conteneur | Espace entre deux paragraphes qui ont chacun une marge de 16 px |
| --- | --- |
| Flex ou grille, avec un écart de 8 px | 40 px : l’écart et les deux marges s’additionnent. |
| Conteneur simple, sans écart | 16 px : deux marges qui se touchent se fondent en une seule, la plus grande. |

### Poser le style Espacé

Pour espacer une rangée ou une grille sans régler l’écart à chaque fois, appliquez-lui le style **Espacé**.

1. Sélectionnez le conteneur et ouvrez l’onglet **Styles**.
2. Dans la liste **Styles**, cliquez sur **Espacé**.

Le style pose un écart du cran `s`, 8 px sur l’échelle livrée, entre les enfants. Il ne touche ni à la marge intérieure ni à la marge.

| Bloc | Enfants espacés |
| --- | --- |
| Conteneur en flex ou en grille | Ses enfants : des boutons côte à côte, des cartes, des colonnes. |
| **Piste du carrousel** | Les cartes du carrousel. |
| **Bande d’onglets** | Les onglets. |

Aucun bloc ne porte ce style d’office : un conteneur neuf n’a pas d’écart. Pour élargir l’écart de tous les blocs qui portent **Espacé**, changez-le sur l’un d’eux puis mettez le style à jour. [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/) explique la mise à jour.

Le style des blocs qui rangent des éléments leur donne un écart.

| Style | Éléments espacés | Écart |
| --- | --- | --- |
| **Groupe de champs** | Les champs d’un formulaire | Cran `m`, 16 px |
| **Champ** | Le libellé, la zone de saisie et la description d’un champ | Cran `s`, 8 px |
| **Étape de formulaire** | Le contenu d’une étape | Cran `s`, 8 px |
| **Navigation entre étapes** | Les boutons précédent et suivant | Cran `s`, 8 px |
| **Onglets** | La barre et les panneaux des onglets | Cran `m`, 16 px |
| **Fil d’Ariane** | Les maillons et leurs séparateurs | Cran `s`, 8 px |
| **Navigation du diaporama** | Les indicateurs d’un slider | Cran `s`, 8 px |

Les éléments qui vont ensemble sont plus proches que ceux qui se lisent à part : le libellé d’un champ est à 8 px de sa zone de saisie, le champ suivant à 16 px.

## Aérer un design

Un design aéré donne de l’air à ses sections et à ses groupes : une marge intérieure plus large sur les sections et un écart plus grand entre les cartes. Agrandir l’espace autour de chaque paragraphe disperse le texte, éloigne un titre de son texte et gonfle chaque carte.

Les rythmes du catalogue de design suivent cette règle. Un rythme plus aéré agrandit les grands crans, ceux des sections et des écarts entre groupes. Les petits crans restent les mêmes. [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/) présente les rythmes.

## Espacer des paragraphes

Un paragraphe n’a pas de marge. Chaque navigateur donne ses propres marges aux éléments : le site les remet toutes à zéro pour qu’une page s’affiche de la même façon partout. L’espace autour d’un paragraphe vient donc de son conteneur, par son écart ou sa marge intérieure, ou d’une marge que vous posez.

- Pour un paragraphe, réglez sa **Marge** dans le panneau **Taille et espacement**.
- Pour tous les enfants d’un conteneur, donnez un **Écart** au conteneur ou appliquez-lui le style **Espacé**.
- Pour un espacement à reprendre sur plusieurs pages, enregistrez un style et appliquez-le aux paragraphes.

Un paragraphe hérite de la page sa police, sa taille et sa couleur. [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) explique la taille de base de la page.

## Voir aussi

- [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/)
- [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)
- [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/)