Differenza tra margine e imbottitura
Share
Margin vs Padding
La differenza tra margine e riempimento è un aspetto importante in CSS come margine e padding sono due concetti importanti usati nel CSS per fornire spaziatura tra diversi elementi. Imbottitura e margini non sono intercambiabili e hanno scopi diversi, quindi devono essere utilizzati in modo appropriato. Il padding è lo spazio tra il contenuto e il bordo di un blocco. Il margine, d'altra parte, è lo spazio al di fuori del confine di un blocco. Il margine separa i blocchi dai blocchi adiacenti mentre il riempimento separa il bordo dal contenuto.
Cos'è Padding?
In CSS (Fogli di stile), il riempimento è lo spazio tra il contenuto e il bordo. Separa il contenuto di un blocco dal suo bordo. Il padding è trasparente e include anche l'immagine di sfondo o il colore di sfondo dell'elemento. La quantità di padding di un elemento è specificata usando il termine "padding" nel codice CSS. Ad esempio, per aggiungere un padding 25px attorno al contenuto che segue il codice può essere utilizzato.
div
larghezza: 300 px;
altezza: 300 px;
imbottitura: 25px;
bordo: 25px solido;
Se necessario, è possibile specificare separatamente diversi valori di padding per sinistra, destra, in alto e in basso. Il seguente pezzo di codice specifica diversi valori di riempimento per ciascun lato.
div
larghezza: 300 px;
altezza: 300 px;
padding-top: 25px;
imbottitura-fondo: 35px;
padding-left: 5px;
padding-right: 10px;
bordo: 25px solido;
Cos'è il margine?
In CSS (Cascading Style Sheets), margin è lo spazio al di fuori del bordo. Separa un blocco da altri blocchi. Il margine è anche trasparente, ma una grande differenza con il riempimento è che il margine non include le immagini di sfondo o i colori di sfondo applicati all'elemento. La quantità di margine in CSS è specificata usando il termine "margine". Il seguente pezzo di codice ha applicato un margine di 25px attorno al blocco div.
div
larghezza: 320 px;
altezza: 320 px;
bordo: 5 px solido;
margine: 25px;
È possibile specificare valori diversi anche per i diversi lati del blocco. La seguente parte di codice applica valori di margine diversi per ciascun lato.
div
larghezza: 320 px;
altezza: 320 px;
bordo: 5 px solido;
margin-top: 25px;
margin-bottom: 35px;
margin-left: 5px;
margin-right: 10px;
Qual è la differenza tra margine e riempimento?
• Il riempimento è lo spazio tra il bordo e il contenuto mentre il margine è lo spazio all'esterno del bordo.
• Riempimento separa il contenuto di un blocco dal bordo. Il margine separa un blocco dall'altro.
• Il riempimento è costituito dalle immagini di sfondo e dai colori di sfondo applicati al contenuto, mentre il margine non lo soddisfa.
• I margini dei blocchi adiacenti possono sovrapporsi mentre il riempimento non si sovrappone.
Sommario:
Riempimento vs margine
Il riempimento è lo spazio all'interno del bordo di un blocco che separa il bordo dal contenuto. Il margine è la spaziatura esterna al bordo che separa un blocco dai blocchi adiacenti. Un'altra differenza è che il padding include l'immagine di sfondo e i colori di sfondo applicati attorno al contenuto mentre il margine non li contiene. I margini dei blocchi adiacenti possono talvolta sovrapporsi quando il browser esegue il rendering della pagina, ma per il riempimento ciò non si verifica.
Immagini per gentile concessione:
