--- url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement' title: "Ajouter de l'espace dedans et autour des éléments | DXPR" author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T14:44:04+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: "Ajouter de l'espace dedans et autour des éléments" description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T14:44:04+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement' articleSection: 'Styler vos éléments' - '@type': WebPage '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/espacement' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Accueil item: 'https://dxpr.com/fr' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: fr --- [Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Styler vos éléments](/fr/hc/documentation/learn-dxpr-builder/element-settings) # Ajouter de l'espace dedans et autour des éléments. Apprendre DXPR BuilderCréer des pagesStyler vos éléments ## Dans ce guide Guides associés - [Changer la taille et la couleur du texte](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie) 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](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-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 : | Taille | Usage | |---|---| | 8 px | Petits écarts dans un groupe, comme une icône et son libellé | | 16 px | Entre éléments liés | | 24 px | Entre blocs de contenu | | 32 px | Dans une carte ou une boîte mise en valeur | | 48 px | Entre sections | ## 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 ```text +----------------- 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](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/css-personnalise) 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](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/typographie) : dimensionnez et colorez le texte dans votre boîte espacée.