Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Padding vs Margin – Qual è la differenza in WordPress?

In WordPress, la spaziatura interna è lo spazio tra il contenuto e il bordo all’interno di un blocco, mentre il margine è lo spazio tra due blocchi separati.

Capire la differenza tra i due è importante per chiunque voglia perfezionare l’aspetto e il layout del proprio sito WordPress.

Noi di WPBeginner abbiamo molta esperienza nella costruzione di siti web e negozi di e-commerce su WordPress. Questo ci ha permesso di conoscere meglio i diversi elementi di design offerti dalla piattaforma, tra cui la spaziatura interna e i margini.

In questo articolo vi mostreremo la differenza tra le caratteristiche di spaziatura interna e di margine e come utilizzarle in WordPress.

Difference between padding and margin in WordPress

Che cos’è il padding in WordPress?

La funzione di padding del sito WordPress viene utilizzata per creare spazio all’interno di un blocco.

Ad esempio, è possibile aggiungere spazio all’interno di un blocco Testo per rendere il suo layout più gradevole alla vista e per evitare che il testo appaia troppo vicino ai bordi del blocco.

Padding preview

È possibile utilizzare il padding anche per controllare il flusso dei contenuti del blog WordPress. Ad esempio, se aggiungete un padding alla parte superiore e inferiore di un blocco di testo, potete facilitare la lettura del contenuto da parte dei visitatori.

Che cos’è un margine in WordPress?

Il margine è uno spazio intorno al bordo di un blocco di WordPress e agli elementi che lo circondano.

In questo modo è possibile aggiungere spazio tra due blocchi diversi, creando un layout del sito web più pulito e aperto.

Margin preview

Ad esempio, è possibile aggiungere margini alla parte superiore e inferiore di un blocco di testo, in modo che rimanga visibile anche quando lo schermo viene ridimensionato.

Inoltre, è possibile utilizzare i margini per aggiungere spazio tra i blocchi di immagini e testo, in modo da rendere il sito web visivamente accattivante e più accessibile per gli utenti.

Qual è la differenza tra spaziatura interna e margini in WordPress?

Ecco un rapido elenco delle differenze tra le caratteristiche di spaziatura interna e di margine di WordPress:

PaddingMargin
Padding means adding space between the content and the border of the block.The margin feature adds space outside the border of the block.
Using padding does not affect the other blocks on your website.Using a margin affects other blocks on your website.
Padding can create a buffer around a block.Margins can create space between two different blocks.

Come utilizzare il padding in WordPress

Per impostazione predefinita, l’editor completo di WordPress (FSE) è dotato della funzione di imbottitura.

Tuttavia, tenete presente che se non utilizzate un tema basato su blocchi, non potrete aggiungere il padding al vostro sito WordPress a meno che non utilizziate un CSS personalizzato.

Detto questo, se si dispone di un tema a blocchi, è possibile visitare la pagina Aspetto ” Editor dalla barra laterale dell’amministrazione di WordPress per avviare l’editor completo del sito.

Una volta arrivati a questo punto, basta scegliere il modello di pagina in cui si desidera aggiungere il padding ai blocchi dalla barra laterale “Modelli” sulla sinistra. Questa barra laterale mostrerà tutti i modelli per le diverse pagine del vostro sito web.

Choose the page where you want to add padding from the left column

Dopo aver fatto ciò, il modello scelto si aprirà sullo schermo.

Da qui, fare clic sul pulsante “Modifica” per iniziare a personalizzare il modello di pagina nell’editor completo del sito.

Click the Edit icon for full site editor

Quindi, scegliere il blocco in cui si desidera aggiungere il padding. Si ricorda che questo significa che si creerà spazio tra il contenuto e il bordo del blocco.

Questo aprirà le impostazioni del blocco nel pannello dei blocchi sul lato destro dello schermo.

Da qui è necessario scorrere verso il basso fino alla sezione “Dimensioni” e fare clic sul menu a tre puntini. Si aprirà un prompt in cui si dovrà selezionare l’opzione “Imbottitura”.

Choose the padding option from the Dimensions section

Quindi, è sufficiente utilizzare i due cursori per aggiungere un padding orizzontale e verticale al blocco.

Tenete presente che questi cursori aggiungeranno un’imbottitura a tutti i lati del blocco.

Padding in full site editor

Tuttavia, se si desidera aggiungere un’imbottitura solo al lato superiore, inferiore, sinistro o destro del blocco, è possibile farlo facendo clic sull’icona “Opzioni di imbottitura” nella sezione dell’imbottitura.

Si aprirà un prompt in cui si potranno selezionare i diversi lati del blocco a cui si vuole aggiungere l’imbottitura.

Choose padding options from the prompt

Tenere presente che se si desidera aggiungere imbottiture diverse a più di un lato del blocco, è necessario selezionare l’opzione “Personalizzato”.

In questo modo si aggiungono quattro diversi cursori sullo schermo per aggiungere imbottiture a destra, a sinistra, in basso o in alto del blocco.

Padding for different corners

Una volta terminato, è sufficiente fare clic sul pulsante “Salva” per memorizzare le impostazioni.

Come utilizzare i margini in WordPress

Proprio come la spaziatura interna, la caratteristica dei margini è integrata nell’editor completo del sito WordPress. Tuttavia, si tenga presente che questa caratteristica non sarà disponibile se non si utilizza un tema a blocchi.

Per iniziare, si può andare alla pagina Aspetto ” Editor dalla dashboard di WordPress.

Una volta lì, scegliere il modello di pagina in cui si desidera aggiungere i margini dalla colonna a sinistra.

Choose the page where you want to add padding or margin from the left column

Si aprirà il modello di pagina scelto sullo schermo.

Da qui, basta selezionare il pulsante “Modifica” per iniziare a personalizzare il modello nell’editor completo del sito.

Click the Edit icon for full site editor

Quindi, scegliere il blocco che si desidera modificare e scorrere fino alla sezione “Dimensioni” nel pannello dei blocchi sulla destra.

Da qui, è sufficiente utilizzare i due cursori per impostare i margini orizzontali e verticali per gli angoli superiore, inferiore, sinistro e destro del blocco. L’uso di questa funzione creerà uno spazio intorno al blocco scelto.

Add margin in the full site editor

Tuttavia, se si desidera utilizzare più cursori per aggiungere margini diversi intorno al blocco, fare clic sull’icona ‘Opzioni margine’ nella sezione.

Si aprirà un nuovo prompt sullo schermo dal quale si potrà selezionare un lato del blocco per aggiungere un margine.

Use margin options

Tuttavia, se si desidera aggiungere margini diversi a più lati, è possibile selezionare l’opzione ‘Personalizzato’.

Nel pannello dei blocchi vengono ora visualizzati vari cursori che possono essere utilizzati per impostare diversi margini intorno al blocco.

Use margin slider

Una volta terminato, non dimenticate di fare clic sul pulsante “Salva” in alto per memorizzare le impostazioni.

Altri suggerimenti per la modifica completa del sito in WordPress

Oltre ad aggiungere padding e margini ai blocchi, è possibile utilizzare l’editor completo del sito per personalizzare l’intero tema WordPress.

Ad esempio, è possibile progettare tutti i modelli di pagina, aggiungere il proprio logo personalizzato, scegliere i colori del marchio, modificare il layout, regolare le dimensioni dei caratteri, aggiungere immagini di sfondo e molto altro ancora.

È anche possibile aggiungere pattern e blocchi diversi al sito web per personalizzarlo ulteriormente. Per maggiori dettagli, consultate la nostra guida per principianti su come personalizzare il tema di WordPress.

Add patterns to your layouts

È inoltre possibile utilizzare l’FSE per aggiungere un’intestazione, un menu di navigazione o un CSS personalizzato al sito web.

Inoltre, è possibile utilizzare gli stili globali per garantire la coerenza del sito. Per ulteriori istruzioni, consultare la nostra guida su come personalizzare i colori sul sito web WordPress.

Choose a background color from the Color Picker

Tuttavia, se non vi piace usare l’editor completo del sito e preferite un maggiore controllo sull’aspetto del vostro sito, potete usare SeedProd per creare pagine e persino l’intero tema.

È il miglior costruttore di landing page sul mercato ed è dotato di un builder a trascinamento e rilascio. In questo modo è facilissimo creare un tema fantastico per il vostro sito web.

Per maggiori dettagli, potete consultare il nostro tutorial su come creare facilmente un tema WordPress personalizzato.

Edit theme template

Speriamo che questo articolo vi abbia aiutato a conoscere la differenza tra le caratteristiche di spaziatura interna e margine in WordPress. Potreste essere interessati anche alla nostra guida per principianti su come modificare l’altezza e la larghezza dei blocchi in WordPress e alla nostra selezione dei migliori plugin per blocchi Gutenberg per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

2 commentiLascia una risposta

  1. Jiří Vaněk

    These are exactly those details that a person doesn’t often remember and then tries to figure out what that slider actually does. Thanks to the mentioned GIFs, it’s beautifully explained what padding and margin specifically do. It’s superb. It’s like a mnemonic aid. What you read, you usually forget, but what you see, you tend to remember much better.

  2. A Owadud Bhuiyan

    I always just remembered that the margin is from the outside and padding from the inside.

    Also, I kept remembering that margin is an important factor regarding the responsive issue on a website.

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.