Gérer les margin et padding

Les margin et padding sont deux propriétés de style CSS à connaître lors de la création d’un site avec Elementor.

Les margin correspondent aux marges externes d’un élément, d’une colonne ou d’une section. Elles permettent d’ajouter des espaces entre différents éléments pour aérer visuellement la page. Les marges peuvent être définies pour les quatre côtés d’un élément (haut, bas, gauche, droite). Les marges positives augmentent l’espace entre les éléments, tandis que les marges négatives diminuent l’espace entre les éléments.

Les padding quand à elles correspondent aux marges internes d’un élément, d’une colonne et d’une section. Les paddings sont les espaces entre les bords d’un élément et son contenu. Par exemple, il faut ajouter des marges internes à un bouton, entre la bordure et le texte du bouton, pour qu’il soit lisible. Les paddings peuvent également être définis pour les quatre côtés d’un élément (haut, bas, gauche, droite). Les paddings positifs augmentent l’espace entre le contenu et les bords de l’élément, tandis que les paddings négatifs réduisent l’espace.

On retrouve ces 2 notions dans le code css :

Comment modifier les margin et padding ?

Pour modifier les margin et padding dans Elementor, clique sur l’élément que tu souhaites modifier, puis dans l’onglet « Avancé ». Sous la section « Avancé », tu peux ajuster les marges (margin) et les padding (marge interne) en utilisant les curseurs ou en saisissant des valeurs personnalisées.

Généralement, je renseigne les marges internes suivantes : 80px en haut et bas / 200px à gauche et à droite (desktop); 50px (tablette); 30px (mobile).

L’icone lien 🔗 permet de lier les valeurs entre elles, pour qu’elles soient égales. Tu peux désactiver si tu souhaites renseigner des valeurs différentes.