Margine vs riempimento
La differenza tra margine e riempimento è un aspetto importante nei CSS poiché margine e riempimento sono due concetti importanti utilizzati nei CSS per fornire spaziatura tra elementi diversi. Il riempimento e i 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, invece, è lo spazio esterno al confine di un blocco. Il margine separa i blocchi dai blocchi adiacenti mentre il riempimento separa il bordo dal contenuto.
Cos'è il riempimento?
Nei CSS (Cascading Style Sheets), il padding è lo spazio tra il contenuto e il bordo. Separa il contenuto di un blocco dal suo bordo. Il riempimento è trasparente e include anche l'immagine di sfondo o il colore di sfondo dell'elemento. La quantità di riempimento di un elemento è specificata utilizzando il termine "padding" nel codice CSS. Ad esempio, per aggiungere un riempimento di 25px attorno al contenuto è possibile utilizzare il codice seguente.
div {
larghezza: 300px;
altezza: 300px;
padding: 25px;
bordo: 25px solido;
}
Se necessario, diversi valori di riempimento possono essere specificati separatamente anche per sinistra, destra, in alto e in basso. Il codice seguente specifica valori di riempimento diversi per ciascun lato.
div {
larghezza: 300px;
altezza: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-sinistra: 5px;
padding-destra: 10px;
bordo: 25px solido;
}
Cos'è il margine?
Nei CSS (Cascading Style Sheets), il margine è lo spazio fuori dal bordo. Separa un blocco da altri blocchi. Anche il margine è trasparente, ma una grande differenza con il riempimento è che il margine non include immagini di sfondo o colori di sfondo applicati all'elemento. L'importo del margine in CSS viene specificato utilizzando il termine "margine". La seguente parte di codice ha applicato un margine di 25px attorno al blocco div.
div {
larghezza: 320px;
altezza: 320px;
bordo: 5px solido;
margine: 25px;
}
Valori diversi possono essere specificati anche per i diversi lati del blocco. La parte di codice seguente applica valori di margine diversi per ciascun lato.
div {
larghezza: 320px;
altezza: 320px;
bordo: 5px solido;
margine superiore: 25px;
margin-bottom: 35px;
margine-sinistra: 5px;
margine-destra: 10px;
}
Qual è la differenza tra margine e riempimento?
• Il riempimento è lo spazio tra il bordo e il contenuto mentre il margine è lo spazio fuori dal bordo.
• Il 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 è tale.
• I margini dei blocchi adiacenti possono sovrapporsi mentre il riempimento non si sovrappone.
Riepilogo:
Padding vs Margin
Padding è lo spazio all'interno del bordo di un blocco che separa il bordo dal contenuto. Il margine è la spaziatura al di fuori del confine che separa un blocco dai blocchi adiacenti. Un' altra differenza è che il riempimento include l'immagine di sfondo ei colori di sfondo applicati attorno al contenuto mentre il margine non li contiene. I margini dei blocchi adiacenti a volte possono sovrapporsi quando il browser esegue il rendering della pagina, ma per il riempimento ciò non accadrà.
