Ajouter de l'espace dedans et autour des éléments.

Donnez au texte de la place dans une boîte colorée, ou éloignez un bouton du paragraphe au-dessus. La marge intérieure est l’espace dans le bord de l’élément ; la marge extérieure est l’espace hors de lui. Vous réglez les deux dans le modèle de boîte en haut du panneau Style. Votre thème et une nouvelle section apportent leur propre espacement ; cette page montre comment le vôtre s’y insère.

La vidéo donne à un bouton une marge extérieure haute de 24 px.

Avant de commencer

• Ouvrez la page dans DXPR Builder ; pointer un élément montre sa barre de contrôle avec Plus. Vous débutez avec le constructeur ? Voir Votre première page.
• Enregistrer dans la boîte de dialogue garde une modification dans l’éditeur. Enregistrer sur la barre d’outils du constructeur au-dessus de votre contenu stocke la page et affiche « Saved field ».
• Utilisez le modèle de boîte pour corriger un écart sur une page.
• Utilisez votre thème ou une classe pour l’espacement qui se répète, comme l’écart entre toutes les sections.
• Tenez-vous à une échelle. Les pages semblent calmes quand chaque écart vient de quelques tailles :

Recette : de la place autour d’un bouton

1. Survolez le Bouton, cliquez sur Plus, puis Paramètres.
2. Ouvrez le panneau Style et cliquez sur le côté haut de Margin, l’anneau extérieur du modèle de boîte. Les verrous commencent ouverts, donc seul ce côté change.
3. Vérifiez que le bouton d’unité affiche PX. Saisissez 24 dans le champ de valeur et appuyez sur Entrée. Le côté affiche désormais 24px et le bouton descend.
4. Cliquez sur Enregistrer dans la boîte de dialogue, puis Enregistrer dans la barre d’outils.

Sur un Bouton, la marge extérieure va sur le bouton lui-même, donc l’espace commence juste à son bord.

Recette : une section plus haute

Une nouvelle section reçoit une marge intérieure haute et basse de la classe Vertical padding size 5 (py-5), qui bat le modèle de boîte. Retirez d’abord cette classe. Vérifiez que le titre de la boîte de dialogue affiche Section, pas Row ni Column.

1. Survolez la Section, cliquez sur Plus, puis Paramètres.
2. Dans le panneau General, trouvez HTML classes et cliquez sur le × sur la pastille Vertical padding size 5 (py-5). La section perd de la place en haut et en bas. S’il n’y a pas une telle pastille, sautez cette étape.
3. Ouvrez le panneau Style. Cliquez sur le côté haut de Padding, saisissez 96 et appuyez sur Entrée.
4. Faites de même pour le côté bas de Padding. Les deux côtés affichent désormais 96px et la section grandit.
5. Cliquez sur Enregistrer dans la boîte de dialogue, puis Enregistrer dans la barre d’outils.

Ce que vous voyez

Chaque côté réglé montre sa valeur dans le modèle de boîte, comme 24px. Le bouton se place 24 px plus bas, et la section a 96 px de place au-dessus et en dessous de son contenu.

Comment fonctionne le modèle de boîte

+----------------- Margin ------------------+
||  +-------------- Border ---------------+  |
||  |  +----------- Padding ------------+ |  |
||  |  |                                | |  |
||  |  |         width × height         | |  |
||  |  |                                | |  |
||  |  +--------------------------------+ |  |
||  +-------------------------------------+  |
+-------------------------------------------+

• Chaque anneau a quatre côtés. Un côté montre sa valeur, comme 24px, ou « - » quand il n’est pas réglé.
• Cliquez sur un côté pour ouvrir un petit sélecteur avec un curseur, un champ de valeur et un bouton d’unité. L’unité est PX ou % ; Border ne prend que px.
• Saisissez une valeur et appuyez sur Entrée, ou faites glisser le curseur. Les flèches haut et bas changent la valeur de 1. Échap ferme le sélecteur.
• Pour réinitialiser un côté, videz le champ de valeur et appuyez sur Entrée. Le côté affiche « - » et votre thème décide de nouveau.

La marge extérieure va de -200 à 200, la marge intérieure de 0 à 200 et la bordure de 0 à 50. La largeur et la hauteur vont de 0 à 2 000. Une marge extérieure négative tire l’élément vers son voisin. Une valeur saisie hors plage est ramenée à la limite la plus proche.

Les verrous

Chaque anneau a un verrou à côté de son nom : Margin, Border et Padding. Quand le verrou est fermé, une valeur réglée sur un côté va aux quatre. Quand il est ouvert, chaque côté garde sa propre valeur. Fermer le verrou ne change pas les valeurs existantes ; seule la prochaine valeur réglée est copiée.

Pourcentage, taille et largeur d’écran

Une valeur en pourcentage est une part de la largeur du parent de l’élément, pour le haut et le bas aussi. Donc une marge intérieure haute de 10 % est plus haute dans une colonne large que dans une étroite.

Le milieu du modèle de boîte contient largeur × hauteur. Les éléments qui se dimensionnent eux-mêmes, comme Image et Carte Google Maps, ignorent ces deux cases.

Le modèle de boîte n’a pas de valeurs par taille d’écran. Pour plus de marge intérieure sur grands écrans que sur téléphones, utilisez plutôt des classes Bootstrap. Par exemple, py-3 py-lg-5 donne 16 px sur écrans plus petits et 48 px à partir de 992 px de large. Voir ID et classes HTML pour savoir comment les saisir.

Comment vos valeurs rencontrent l’espacement du thème

• Les nouvelles sections apportent de la marge intérieure. Une section ajoutée dans l’éditeur reçoit la classe Vertical padding size 5 (py-5) : 3rem, environ 48 px, en haut et en bas. La classe est marquée !important, donc elle bat votre Padding haut et bas. Les marges intérieures gauche et droite fonctionnent toujours.
• Les classes d’espacement gagnent. Toute classe d’espacement Bootstrap sous HTML classes, comme Top margin size 3 (mt-3), bat votre valeur du même côté.
• Les colonnes gardent un écart. Bootstrap donne à chaque colonne 12 px de marge intérieure à gauche et à droite. Une Padding gauche ou droite sur une colonne la remplace, donc le contenu ne s’aligne plus avec la colonne suivante.
• Les paragraphes gardent leur propre espacement. Votre thème met de l’espace sous chaque paragraphe et titre. Le modèle de boîte ne change pas cet espace, car il agit sur l’élément entier.
• Les marges extérieures voisines se chevauchent généralement. Quand un élément se place au-dessus d’un autre, la marge extérieure basse du premier et la marge extérieure haute du second partagent l’écart. La plus grande gagne ; elles ne s’additionnent pas.

Si rien ne s’affiche

• La marge intérieure haute ou basse sur une section ne fait rien. La classe Vertical padding size 5 (py-5) gagne. Retirez sa pastille sous HTML classes.
• Une valeur de marge extérieure ou intérieure ne fait rien. Une classe d’espacement Bootstrap du même côté gagne. Retirez sa pastille, ou n’utilisez que la classe.
• La marge intérieure ne s’affiche pas. L’élément n’a ni arrière-plan ni bordure, donc l’espace est invisible. Choisissez une couleur Background pendant le réglage.
• La valeur a sauté à 200. La marge intérieure et extérieure s’arrêtent à 200, la bordure à 50. Utilisez une valeur plus petite, ou un pourcentage.
• La page est à l’étroit sur téléphones. La même valeur en pixels s’applique sur chaque écran. Utilisez des valeurs plus petites, un pourcentage ou des classes responsive.
• Les deux écarts ne s’additionnent pas. Les marges extérieures empilées se chevauchent et la plus grande gagne. Mettez tout l’écart sur l’un des deux éléments.
• Les colonnes ne s’alignent plus. La Padding latérale sur une colonne a remplacé l’écart de la grille. Videz de nouveau ces côtés.

Et ensuite ?

• Typographie : dimensionnez et colorez le texte dans votre boîte espacée.