--- url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura' title: 'Aggiungere spazio dentro e intorno agli elementi | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T13:45:24+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Dai spazio al testo dentro un riquadro colorato, o spingi un pulsante lontano dal paragrafo sopra di esso. Padding è lo spazio dentro il bordo di un elemento; margine è lo spazio fuori di esso. Imposti entrambi nel box model in cima al pannello Stile. Il tuo tema e una nuova sezione portano la loro spaziatura; questa pagina mostra come si inserisce la tua. Il video dà a un pulsante un margine superiore di 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: 'Aggiungere spazio dentro e intorno agli elementi' description: |- Dai spazio al testo dentro un riquadro colorato, o spingi un pulsante lontano dal paragrafo sopra di esso. Padding è lo spazio dentro il bordo di un elemento; margine è lo spazio fuori di esso. Imposti entrambi nel box model in cima al pannello Stile. Il tuo tema e una nuova sezione portano la loro spaziatura; questa pagina mostra come si inserisce la tua. Il video dà a un pulsante un margine superiore di 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-24T13:45:24+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/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura' articleSection: 'Dai stile agli elementi' - '@type': WebPage '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/spaziatura' description: |- Dai spazio al testo dentro un riquadro colorato, o spingi un pulsante lontano dal paragrafo sopra di esso. Padding è lo spazio dentro il bordo di un elemento; margine è lo spazio fuori di esso. Imposti entrambi nel box model in cima al pannello Stile. Il tuo tema e una nuova sezione portano la loro spaziatura; questa pagina mostra come si inserisce la tua. Il video dà a un pulsante un margine superiore di 24 px. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/it' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: it --- [Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Crea le pagine](/it/hc/documentation/learn-dxpr-builder/build) /[Dai stile agli elementi](/it/hc/documentation/learn-dxpr-builder/element-settings) # Aggiungere spazio dentro e intorno agli elementi. Impara DXPR BuilderCrea le pagineDai stile agli elementi ## In questa guida Guide correlate - [Cambiare dimensione e colore del testo](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia) Dai spazio al testo dentro un riquadro colorato, o spingi un pulsante lontano dal paragrafo sopra di esso. Padding è lo spazio dentro il bordo di un elemento; margine è lo spazio fuori di esso. Imposti entrambi nel box model in cima al pannello **Stile**. Il tuo tema e una nuova sezione portano la loro spaziatura; questa pagina mostra come si inserisce la tua. Il video dà a un pulsante un margine superiore di 24 px. ## Prima di iniziare - Apri la pagina in DXPR Builder; indicare un elemento mostra la sua barra di controllo con **Altro**. È la prima volta che usi il page builder? Vedi [La tua prima pagina](/it/hc/documentazione/impara-dxpr-builder/per-iniziare/prima-pagina). - **Salva** nella finestra mantiene una modifica nell’editor. **Salva** nella barra degli strumenti del page builder sopra i tuoi contenuti memorizza la pagina e mostra “Campo salvato”. - **Usa il box model** per sistemare un gap su una pagina. - **Usa il tuo tema o una classe** per spaziatura che si ripete, come il gap tra tutte le sezioni. - **Attieniti a una scala.** Le pagine sembrano calme quando ogni gap viene da poche dimensioni: | Dimensione | Usala per | |---|---| | 8 px | Piccoli gap dentro un gruppo, come un’icona e la sua etichetta | | 16 px | Tra voci correlate | | 24 px | Tra blocchi di contenuto | | 32 px | Dentro una card o un riquadro evidenziato | | 48 px | Tra sezioni | ## Ricetta: spazio intorno a un pulsante 1. Passa sopra il **Pulsante**, fai clic su **Altro**, poi **Impostazioni**. 2. Apri il pannello **Stile** e fai clic sul lato superiore di **Margine**, l’anello esterno del box model. I lucchetti iniziano aperti, quindi solo questo lato cambia. 3. Controlla che il pulsante unità mostri **PX**. Digita 24 nel campo valore e premi Invio. Il lato ora dice 24px e il pulsante si sposta giù. 4. Fai clic su **Salva** nella finestra, poi **Salva** nella barra degli strumenti. Su un Pulsante il margine va sul pulsante stesso, quindi lo spazio inizia proprio al suo bordo. ## Ricetta: una sezione più alta Una nuova sezione riceve padding superiore e inferiore dalla classe **Padding verticale dimensione 5 (py-5)**, che batte il box model. Rimuovi prima quella classe. Controlla che il titolo della finestra dica Sezione, non Riga o Colonna. 1. Passa sopra la **Sezione**, fai clic su **Altro**, poi **Impostazioni**. 2. Nel pannello **Generale**, trova **Classi HTML** e fai clic sulla × sul chip **Padding verticale dimensione 5 (py-5)**. La sezione perde spazio in cima e in fondo. Se non c’è tale chip, salta questo passaggio. 3. Apri il pannello **Stile**. Fai clic sul lato superiore di **Padding**, digita 96 e premi Invio. 4. Fai lo stesso per il lato inferiore di **Padding**. Entrambi i lati ora dicono 96px e la sezione diventa più alta. 5. Fai clic su **Salva** nella finestra, poi **Salva** nella barra degli strumenti. ## Cosa vedi Ogni lato che imposti mostra il suo valore nel box model, come 24px. Il pulsante sta 24 px più in basso, e la sezione ha 96 px di spazio sopra e sotto il suo contenuto. ## Come funziona il box model ```text +----------------- Margin ------------------+ | +-------------- Border ---------------+ | | | +----------- Padding ------------+ | | | | | | | | | | | width × height | | | | | | | | | | | +--------------------------------+ | | | +-------------------------------------+ | +-------------------------------------------+ ``` - Ogni anello ha quattro lati. Un lato mostra il suo valore, come 24px, o “-” quando non è impostato. - Fai clic su un lato per aprire un piccolo selettore con un cursore, un campo valore e un pulsante unità. L’unità è **PX** o **%**; **Bordo** prende solo px. - Digita un valore e premi Invio, o trascina il cursore. I tasti freccia su e giù cambiano il valore di 1. Escape chiude il selettore. - Per desimpostare un lato, svuota il campo valore e premi Invio. Il lato mostra “-” e il tuo tema decide di nuovo. Margine va da -200 a 200, padding da 0 a 200 e bordo da 0 a 50. Larghezza e altezza vanno da 0 a 2.000. Un margine negativo tira l’elemento verso il suo vicino. Un valore digitato fuori intervallo è tagliato al limite più vicino. ### I lucchetti Ogni anello ha un lucchetto accanto al suo nome: **Margine**, **Bordo** e **Padding**. Quando il lucchetto è chiuso, un valore che imposti su un lato va a tutti e quattro. Quando è aperto, ogni lato mantiene il suo valore. Chiudere il lucchetto non cambia i valori che hai già; solo il prossimo valore che imposti è copiato. ### Percentuale, dimensione e larghezza dello schermo Un valore percentuale è una quota della larghezza del genitore dell’elemento, anche per sopra e sotto. Quindi 10% di padding superiore è più alto in una colonna larga che in una stretta. Il centro del box model contiene larghezza × altezza. Elementi che si dimensionano da soli, come Immagine e Mappa, ignorano quei due riquadri. Il box model non ha valori per dimensione dello schermo. Per più padding su schermi grandi che sui telefoni, usa invece classi Bootstrap. Ad esempio, `py-3 py-lg-5` dà 16 px su schermi più piccoli e 48 px da 992 px di larghezza. Vedi [ID HTML e classi](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/css-personalizzato) per come digitarle. ## Come i tuoi valori incontrano la spaziatura del tema - **Le nuove sezioni portano padding.** Una sezione che aggiungi nell’editor riceve la classe **Padding verticale dimensione 5 (py-5)**: 3rem, circa 48 px, in cima e in fondo. La classe è marcata `!important`, quindi batte il tuo **Padding** superiore e inferiore. Il padding sinistro e destro funziona ancora. - **Le classi di spaziatura vincono.** Qualsiasi classe di spaziatura Bootstrap sotto **Classi HTML**, come **Margine superiore dimensione 3 (mt-3)**, batte il tuo valore sullo stesso lato. - **Le colonne mantengono un gap.** Bootstrap dà a ogni colonna 12 px di padding a sinistra e a destra. **Padding** sinistro o destro su una Colonna lo sostituisce, quindi il contenuto non si allinea più con la colonna successiva. - **I paragrafi mantengono la loro spaziatura.** Il tuo tema mette spazio sotto ogni paragrafo e titolo. Il box model non cambia quello spazio, perché lavora sull’elemento nel suo insieme. - **I margini dei vicini di solito si sovrappongono.** Quando un elemento sta sopra un altro, il margine inferiore del primo e il margine superiore del secondo condividono il gap. Vince il più grande; non si sommano. ## Se non lo vedi - **Il padding superiore o inferiore su una sezione non fa niente.** La classe **Padding verticale dimensione 5 (py-5)** vince. Rimuovi il suo chip sotto **Classi HTML**. - **Un valore di margine o padding non fa niente.** Una classe di spaziatura Bootstrap sullo stesso lato vince. Rimuovi il suo chip, o usa solo la classe. - **Il padding non si mostra.** L’elemento non ha sfondo o bordo, quindi lo spazio è invisibile. Scegli un colore **Sfondo** mentre lo regoli. - **Il valore è saltato a 200.** Padding e margine si fermano a 200, bordo a 50. Usa un valore più piccolo, o una percentuale. - **La pagina è stretta sui telefoni.** Lo stesso valore in pixel si applica su ogni schermo. Usa valori più piccoli, una percentuale, o classi responsive. - **I due gap non si sono sommati.** I margini impilati si sovrappongono e vince il più grande. Metti l’intero gap su uno dei due elementi. - **Le colonne non si allineano più.** **Padding** laterale su una Colonna ha sostituito il gap della griglia. Svuota di nuovo quei lati. ## Passi successivi - [Tipografia](/it/hc/documentazione/impara-dxpr-builder/impostazioni-elemento/tipografia): dimensiona e colora il testo dentro il tuo riquadro spaziato.