Aggiungere spazio dentro e intorno agli elementi.

Impara DXPR BuilderCrea le pagineDai stile agli elementi

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.
  • 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.

Pannello Stile di un Pulsante con un Margine superiore di 24px nel box model, accanto al pulsante Prenota un tour con spazio sopra di esso, sotto il testo Tour del campus

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.

Pannello Stile di una Sezione con 96px di Padding superiore e inferiore, accanto a quella sezione, ora più alta, con sfondo grigio e testo centrato

Cosa vedi

Box model con 32 px di padding su ogni lato e un margine inferiore di 48 px, accanto al blocco grigio Tour del campus e il pulsante 48 px sotto di esso

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

+----------------- 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 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: dimensiona e colora il testo dentro il tuo riquadro spaziato.