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é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.

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 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.

L’échelle livrée avec votre site

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é.

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.

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.

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.

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.

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 explique la mise à jour.

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

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 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 explique la taille de base de la page.

Voir aussi

• Régler la taille, les bordures et les effets
• Conteneur
• Enregistrer le style d’un bloc
• Mettre en forme un texte