Marges Wix Studio : marges externes et internes (padding) expliquées

Les marges créent l’espace qui rend un design lisible. Dans Wix Studio, on distingue deux types d’espace : la marge, autour d’un élément, et la marge intérieure (padding), à l’intérieur d’un conteneur.

En bref : la marge règle la distance entre un élément et le bord de son parent, dans l’Inspecteur, rubrique Position. La marge intérieure règle l’espace entre le bord d’un conteneur et son contenu, rubrique Mise en page. Par défaut, les deux utilisent le px*, une unité fluide qui s’adapte à l’écran.

Marge ou marge intérieure : quelle différence ?

La marge fonctionne avec le docking : l’élément est accroché à un bord, et la marge fixe la distance avec ce bord.

Comment régler les marges d’un élément dans Wix Studio

1. Sélectionnez l’élément.

2. Ouvrez l’Inspecteur avec la flèche en haut à droite.

3. Descendez jusqu’à la rubrique Position.

4. Saisissez une valeur pour la marge concernée : gauche, droite, haut ou bas.

Astuce : avec des marges négatives, vous pouvez faire se chevaucher des éléments dans une pile, pour un design plus riche.

Comment régler la marge intérieure (padding)

1. Sélectionnez le conteneur (section, cellule, pile ou flexbox).

2. Ouvrez l’Inspecteur.

3. Descendez jusqu’à la rubrique Mise en page.

4. Choisissez de régler un côté précis, les côtés gauche et droit ensemble, ou le haut et le bas ensemble.

Une fois la marge intérieure ajoutée, vous pouvez aussi l’ajuster directement sur le canevas par glisser-déposer.

Quelle unité choisir pour vos marges ?

Le px* est l’unité par défaut. Vous pouvez en changer en cliquant sur l’unité affichée, pour tous les côtés à la fois ou pour chaque côté séparément. Voir les unités de mesure Wix Studio.

Les erreurs à éviter avec les marges

• Mélanger % et px sur des éléments voisins : ils se désalignent quand l’écran change.

• Placer des éléments avec de grandes marges au lieu d’utiliser une pile ou une grille CSS.

• Oublier de vérifier les marges sur tablette et mobile.

Mon avis de webdesigner sur les marges Wix Studio

La marge intérieure est sous-utilisée par les débutants. Pourtant, un padding cohérent sur toutes vos sections donne immédiatement un site plus professionnel. Mon conseil : choisissez une valeur de marge intérieure pour vos sections et gardez-la partout.

Et si vous passez votre temps à régler des marges une à une, c’est souvent le signe qu’il faut regrouper vos éléments dans une pile ou un conteneur. Besoin d’aide pour structurer votre site ? Voyez notre offre d’expert Wix Studio.

Questions fréquentes sur les marges Wix Studio

Où sont les marges dans Wix Studio ?

Dans l’Inspecteur : rubrique Position pour les marges externes, rubrique Mise en page pour les marges intérieures.

Pourquoi je ne trouve pas de marge intérieure sur mon élément ?

La marge intérieure n’existe que sur les conteneurs responsive : sections, cellules, piles et flexbox. Un texte ou une image n’en a pas.

Peut-on mettre une marge négative ?

Oui, notamment dans une pile, pour faire se chevaucher des éléments.

À propos de l’auteur Alexandre Cottret, webdesigner freelance et fondateur de Trend Design, certifié Wix Partner Legend et Wix Studio. Plus de 150 sites créés depuis 2021, 5/5 sur Malt (93 avis).

Sources : Wix : docking, marges et marges intérieures, Wix : résoudre les problèmes de responsive.