Comment ajuster l'espace entre deux blocs de contenu, padding, margin, séparateurs

Vous avez ajouté un nouveau titre, du texte et des photos mais tout apparaît trop collé ou pas là où vous le voulez. Nous allons vous expliquer comment résoudre ce problème !

Le padding

Le padding est l'espace entre l'élément (texte, titre etc.) et le bord de la boîte qui le contient. Il est exprimé en px (pixels) ou en pourcentage et peut concerner séparément le haut, le bas, la gauche et la droite. Il peut être modifié depuis les options d'un bloc.

Il suffit ensuite d'entrer les valeurs dans les cases prévues à cet effet puis d'enregistrer les modifications.

Exemple :

Valeur par défaut (0 px)

Avec 50px de padding entre le bord supérieur de la boîte et le texte

Le margin

Le margin est l'espace qui entoure la boîte de contenu. Comme pour le padding il est exprimé en px ou en % et concerne séparément chaque bord de la boîte bien qu'il soit généralement proposé uniquement pour le haut ou le bas. Il peut concerner la boîte de contenu ou certains éléments comme les séparateurs. Il peut être modifié depuis les options d'un bloc.

Exemple :

Valeur par défaut (0px)

Avec 50px de margin au dessus de la boîte de texte

Les séparateurs

Les séparateurs sont des éléments invisibles qui permettent d'espacer deux éléments en modifiant leur margin. Pour en ajouter, cliquez sur + Element et sélectionnez Separator dans la liste (utilisez la recherche pour le trouver rapidement).

Ajoutez la valeur de l'espacement désiré (ici 50 px au dessus).

Cliquez sur SAVE puis déplacez le séparateur à l'endroit désiré et enregistrez vos modifications.

Exemple :

Sans séparateur entre le texte et la photo

Avec un séparateur dont le margin a été mis à 50px au dessus