Margine vs riempimento
La differenza tra margin e padding è un aspetto importante nei CSS poiché il margine e il padding sono due concetti importanti utilizzati nei CSS per fornire la spaziatura tra i diversi elementi. Il riempimento e i margini non sono intercambiabili e hanno scopi diversi, quindi devono essere utilizzati in modo appropriato. L'imbottitura è lo spazio tra il contenuto e il bordo di un blocco. Il margine, invece, è lo spazio fuori dal confine di un blocco. Il margine separa i blocchi dai blocchi adiacenti mentre il riempimento separa il bordo dal contenuto.
Cos'è il padding?
In CSS (Cascading Style Sheets), il padding è lo spazio mantenuto tra il contenuto e il bordo. Separa il contenuto di un blocco dal suo bordo. L'imbottitura è trasparente e include anche l'immagine di sfondo o il colore di sfondo dell'elemento. La quantità di riempimento di un elemento viene specificata utilizzando il termine "riempimento" nel codice CSS. Ad esempio, per aggiungere una spaziatura interna di 25px attorno al contenuto è possibile utilizzare il codice seguente.
div {
larghezza: 300 px;
altezza: 300 px;
imbottitura: 25px;
bordo: 25px solido;
}
Se necessario, è possibile specificare separatamente valori di riempimento diversi per sinistra, destra, in alto e in basso. La parte di codice seguente specifica diversi valori di riempimento per ogni lato.
div {
larghezza: 300 px;
altezza: 300 px;
imbottitura in alto: 25px;
imbottitura inferiore: 35px;
padding-left: 5px;
padding-right: 10px;
bordo: 25px solido;
}
Cos'è il margine?
In CSS (Cascading Style Sheets), il margine è lo spazio al di fuori del 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. La quantità di margine in CSS viene specificata utilizzando il termine "margine". La parte di codice seguente ha applicato un margine di 25px attorno al blocco div.
div {
larghezza: 320 px;
altezza: 320 px;
bordo: 5px solido;
margine: 25px;
}
È inoltre possibile specificare valori diversi per lati diversi del blocco. La parte di codice seguente applica valori di margine diversi per ogni lato.
div {
larghezza: 320 px;
altezza: 320 px;
bordo: 5px solido;
margin-top: 25px;
margine inferiore: 35 px;
margine sinistro: 5px;
margin-right: 10px;
}
Qual è la differenza tra Margin e Padding?
• 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 lo contiene.
• I margini dei blocchi adiacenti possono sovrapporsi mentre il riempimento non si sovrappone.
Sommario:
Padding vs Margin
Il riempimento è 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 tale cosa non accadrà.
Immagini per gentile concessione:
