Modifier l’espacement (marge et remplissage)

Ce didacticiel vidéo vous aidera à mieux comprendre la marge et le rembourrage

Dans cet article, vous apprendrez à contrôler l’espacement entre les éléments avec marge et remplissage.

Que sont la marge et le remplissage?

Vous pouvez vérifier plus de détails dans le didacticiel vidéo ci-dessous.

Tous les éléments Web ont des attributs d’espacement comme ceux-ci.

Pour en savoir plus sur la marge et le remplissage, consultez cet article écrit par w3school.

Comment modifier la marge et le remplissage

Pour modifier la marge et le remplissage d’un élément PageFly, sélectionnez d’abord l’élément> l’onglet Style> la section ESPACEMENT.

Les 4 cases vides vous permettent de renseigner la valeur pour 4 côtés: en haut – à droite – en bas – à gauche. Par exemple avec l’élément Image.

Lorsque vous ajoutez un nombre dans le champ du milieu, le même nombre sera appliqué à tous les côtés – en haut, à droite, en bas et à gauche.

Cas couramment utilisés

Avant de passer aux étapes spécifiques, vous pouvez regarder cette vidéo pour savoir comment ajuster l’élément d’espacement dans PageFly

Cas 1: Modifier l’espacement à l’intérieur d’un élément en utilisant un remplissage

Pour modifier l’espacement à l’intérieur d’un élément, modifiez son remplissage. Dans l’exemple, nous voulons pousser un peu l’en tête «COLLECTION RING», nous ajoutons donc un remplissage supérieur à la colonne qui contient l’en tête.

Choisissez Colonne> onglet Style> section ESPACEMENT> ajoutez 50 pixels au remplissage supérieur. Le changement de remplissage ou de marge d’une colonne est toujours préféré au remplissage ou à la marge de chaque élément. Il vous sera plus facile de modifier la mise en page à l’avenir.

Optimiser la conception mobile

Tout d’abord, passez à la vue mobile: accédez à la barre supérieure> accédez à Sélecteur d’appareil> choisissez Mobile.

Sélectionnez ensuite la colonne> onglet Style> section ESPACEMENT. Vous pouvez voir qu’il a 50 pixels pour le rembourrage supérieur, qui a été ajouté lorsque nous l’avons défini sur toutes les vues.

Étant donné que l’espace sur les appareils mobiles est considérablement plus petit que sur le bureau, vous souhaiterez peut-être modifier ces valeurs.

Cas 2: Modifier l’espacement entre 2 éléments voisins à l’aide de la marge

Pour modifier l’espacement de 2 éléments voisins, modifiez la marge d’un côté d’un élément.

Dans cet exemple, nous voulons pousser le bouton plus loin de l’en-tête «COLLECTION RING», nous ajoutons donc des valeurs à la marge inférieure de l’en-tête.

Choisissez l’élément l’en tête> onglet Style> section ESPACEMENT> ajoutez 45 px à la marge inférieure.

La marge inférieure crée plus d’espace et pousse l’élément bouton plus loin de l’en tête.

Optimiser la conception mobile

Tout d’abord, passez à la vue mobile: accédez à la barre supérieure> accédez à Sélecteur d’appareil> choisissez Mobile.

Sélectionnez ensuite l’en-tête> onglet Style> section ESPACEMENT. Vous pouvez voir qu’il a 45 pixels pour la marge inférieure, qui a été ajoutée lorsque nous l’avons définie sur toutes les vues.

Étant donné que l’espace sur les appareils mobiles est considérablement plus petit que celui des ordinateurs de bureau, vous pouvez modifier ces valeurs.

Cas 3: Modifier l’espacement sur les côtés gauche / droit

Pour modifier l’espacement sur les côtés gauche / droit d’un élément, utilisez l’unité «%» au lieu de «pixel» afin qu’il puisse répondre à différentes tailles d’écran.

Dans l’exemple, nous voulons rapprocher le paragraphe du centre, nous ajoutons donc des valeurs au remplissage à droite et au remplissage à gauche de la section qui contient le paragraphe.

Choisissez la section> onglet Style> section ESPACEMENT> ajoutez 10% au remplissage droit et gauche.

Optimiser la conception mobile

Tout d’abord, passez à la vue mobile: accédez à la barre supérieure> accédez à Sélecteur d’appareil> choisissez Mobile.

Sélectionnez ensuite la section> onglet Style> section ESPACEMENT. Ces valeurs sont ajoutées lorsque nous le définissons sur toutes les vues.

Étant donné que l’espace dans les appareils mobiles est nettement plus petit que celui des ordinateurs de bureau, vous pouvez modifier ces valeurs.

Cas 4: Modifier l’espacement entre les colonnes de la ligne

Pour modifier l’espacement des colonnes d’une ligne, sélectionnez la ligne> onglet Général> section CONTENU> ajustez la valeur d’espacement des colonnes.

Optimiser la conception mobile

Tout d’abord, passez à la vue mobile: accédez à la barre supérieure> accédez à Sélecteur d’appareil> choisissez Mobile.

Sélectionnez ensuite la section> onglet Style> section ESPACEMENT. Vous pouvez voir l’espacement des colonnes de la tablette, et Mobile est également de 30 px.

Étant donné que l’espace dans les appareils mobiles est nettement plus petit que celui des ordinateurs de bureau, vous pouvez modifier cette valeur.