Quando usare il margine rispetto al padding nei CSS

Quando si scrive CSS, c’è una particolare regola o linea guida che dovrebbe essere usata per decidere quando usare il margin e quando usare il padding ?

TL; DR: per impostazione predefinita utilizzo il margine ovunque, tranne quando ho un bordo o uno sfondo e voglio aumentare lo spazio all’interno di quella casella visibile.

Per me la più grande differenza tra padding e margine è che i margini verticali si auto-collassano e il padding no. Considera due elementi uno sopra l’altro ciascuno con padding di 1em. Questo riempimento è considerato parte dell’elemento e viene sempre conservato. Quindi finirai con il contenuto del primo elemento, seguito dal padding del primo elemento, seguito dal padding del secondo, seguito dal contenuto del secondo elemento. Quindi il contenuto dei due elementi finirà per essere 2em a parte.

Ora sostituisci quella imbottitura con margine 1em. I margini sono considerati al di fuori dell’elemento e i margini degli elementi adiacenti si sovrappongono. Quindi in questo esempio finirai con il contenuto del primo elemento seguito da 1em di margine combinato seguito dal contenuto del secondo elemento. Quindi il contenuto dei due elementi è solo 1em a parte.

Questo può essere davvero utile quando sai che vuoi dire 1em di spaziatura attorno a un elemento, indipendentemente da quale elemento si trovi accanto.

Le altre due grandi differenze sono che il padding è incluso nella regione dei clic e nel colore / immagine di sfondo, ma non nel margine.

Il margine è all’esterno degli elementi di blocco mentre il riempimento è all’interno.

  • Usa il margine per separare il blocco da cose al di fuori di esso
  • Usa il padding per spostare il contenuto lontano dai bordi del blocco.

inserisci la descrizione dell'immagine qui

Il meglio che ho visto spiegando questo con esempi, diagrammi e persino una vista “prova tu stesso” è qui .

Il diagramma qui sotto mi sembra una comprensione visiva istantanea della differenza.

inserisci la descrizione dell'immagine qui

Una cosa da tenere a mente è che i browser conformi agli standard ( IE quirks è un’eccezione ) rendono solo la parte del contenuto alla larghezza specificata, quindi tenetene traccia nei calcoli del layout. Si noti inoltre che border box sta vedendo un po ‘un ritorno con Bootstrap 3 che lo supporta.

MARGINE vs IMBOTTITURA :

  1. Il margine viene utilizzato in un elemento per creare una distanza tra quell’elemento e gli altri elementi della pagina. Dove viene utilizzato il riempimento per creare una distanza tra il contenuto e il bordo di un elemento.

  2. Il margine non fa parte di un elemento in cui il riempimento è parte dell’elemento.

Si prega di fare riferimento qui sotto l’immagine estratta da Margin Vs Padding – Proprietà CSS

Margin vs Padding

Ci sono più spiegazioni tecniche per la tua domanda, ma se stai cercando un modo per pensare al margine e al padding che ti aiuteranno a scegliere quando e come usarli, questo potrebbe aiutarti.

Confronta gli elementi di blocco con le immagini appese a un muro:

  • La finestra del browser è proprio come il muro.
  • Il contenuto è proprio come una fotografia.
  • Il margine è esattamente come lo spazio tra le immagini incorniciate.
  • L’ imbottitura è proprio come la stuoia attorno a una foto.
  • Il bordo è come il bordo di una cornice.

Quando decidi tra margine e padding, è una buona regola per usare il margine quando stai spaziando un elemento in relazione ad altre cose sul muro, e il riempimento quando stai modificando l’aspetto dell’elemento stesso. Il margine non cambierà la dimensione dell’elemento, ma il riempimento di solito renderà l’elemento più grande 1 .

1 Questo modello di casella predefinito può essere modificato con l’ attributo di box-sizing della box-sizing .

Ecco alcuni HTML che dimostrano in che modo padding e margin influiscono sulla possibilità di fare clic e sul riempimento in background. Un object riceve clic sul suo riempimento, ma i clic sull’area marginata di un object vanno al suo genitore.

 $(".outer").click(function(e) { console.log("outer"); e.stopPropagation(); }); $(".inner").click(function(e) { console.log("inner"); e.stopPropagation(); }); 
 .outer { padding: 10px; background: red; } .inner { margin: 10px; padding: 10px; background: blue; border: solid white 1px; } 
  

Il problema dei margini è che non devi preoccuparti della larghezza dell’elemento.

Come quando dai qualcosa {padding: 10px;} , devi ridurre la larghezza dell’elemento di 20px per mantenere l’ adattamento e non disturbare altri elementi attorno ad esso.

Quindi in genere inizio utilizzando i paddings per ottenere tutto ‘ packed ‘ e quindi utilizzare i margini per piccoli aggiustamenti.

Un’altra cosa di cui essere a conoscenza è che i paddings sono più coerenti su diversi browser e IE non tratta molto bene i margini negativi.

Il margine cancella un’area intorno a un elemento (al di fuori del bordo), ma il riempimento cancella un’area attorno al contenuto (all’interno del bordo) di un elemento.

inserisci la descrizione dell'immagine qui

significa che il tuo elemento non conosce i suoi margini esterni, quindi se stai sviluppando controlli web dinamici, ti consiglio di usare padding vs margin se puoi.

nota che alcune volte devi usare il margine.

Quando utilizzare i margini e il riempimento

Ci sono due modi in CSS per creare spazio attorno ai tuoi elementi: margini e padding. Nella maggior parte degli scenari di utilizzo, sono funzionalmente identici ma in realtà si comportano in modi leggermente diversi. Ci sono importanti differenze tra margini e padding che dovresti prendere in considerazione quando scegli quale usare per spostare gli elementi intorno alla pagina. Tuttavia, in quei casi in cui i margini o il padding potrebbero essere usati allo stesso effetto, gran parte della decisione si riduce alle preferenze personali.

Quando usare i margini

  1. Si desidera che la spaziatura venga visualizzata al di fuori della “casella” creata da una proprietà del bordo. I margini si trovano fuori dai confini, quindi li useresti se vuoi che il tuo confine rimanga in un posto. Questo può essere utile se si dispone, ad esempio, di una barra laterale con un bordo che si desidera spostare dall’area del contenuto principale.

  2. Non vuoi che il tuo colore di sfondo o l’immagine invadano il tuo spazio personale. I colors di sfondo e le immagini si fermano al bordo, quindi se preferisci mantenere gli sfondi fuori dallo spazio che stai creando, i margini sono la proprietà che desideri.

  3. Ti piacerebbe uno spazio pieghevole nella parte superiore e inferiore dell’elemento. I margini superiore e inferiore si comportano in modo diverso rispetto ai margini laterali in quanto se due margini sono uno sopra l’altro, essi collassano fino alla dimensione del set di margine più grande. Ad esempio, se imposto il paragrafo per avere un margine superiore di 20 pixel e un margine inferiore di 15 pixel, avrò solo 20 pixel di spazio totale tra i paragrafi (i due margini collassano l’uno nell’altro e il più grande vince) .

Quando usare il padding

  1. Vuoi che tutto lo spazio che stai creando sia all’interno del tuo confine. Il riempimento è contenuto all’interno dei tuoi bordi, quindi è utile per spingere i tuoi bordi lontano dal contenuto all’interno del tuo elemento.

  2. Hai bisogno del tuo colore / immagine di sfondo per continuare nello spazio che stai creando. Il tuo background continuerà dietro il tuo padding, quindi usalo solo se vuoi che lo sfondo dia una sbirciata.

  3. Vuoi che il tuo spazio superiore e quello inferiore si comportino in modo più rigido. Ad esempio, se si impostano i paragrafi nel documento con un riempimento superiore di 20 pixel e una spaziatura inferiore di 15 pixel, in qualsiasi momento in cui si hanno due paragrafi di fila, in realtà avranno un totale di 35 pixel di spazio fra loro.

Spiegazione delle diverse parti:

Contenuto: il contenuto della casella, dove vengono visualizzati testo e immagini

Riempimento – Cancella un’area attorno al contenuto. L’imbottitura è trasparente

Bordo: un bordo che circonda il riempimento e il contenuto

Margine – Cancella un’area al di fuori del confine. Il margine è trasparente

Mostrando varie parti

Ecco l’esempio dal vivo: (giocare con la modifica dei valori) http://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Una cosa da notare è quando i margini di collassamento automatico ti infastidiscono (e non stai usando i colors di sfondo sui tuoi elementi), qualcosa è semplicemente più facile usare il padding.

Spiegazione del margine avanzato rispetto all’imbottitura

Non è appropriato utilizzare il padding per spaziare il contenuto in un elemento; devi invece utilizzare il margin sull’elemento figlio . I browser meno recenti come Internet Explorer interpretavano erroneamente il modello di box eccetto quando si trattava di usare il margin che funziona perfettamente in Internet Explorer 4 .

Ci sono due eccezioni quando si usa il padding per usare:

  1. Viene applicato a un elemento in linea che non può contenere elementi secondari come un elemento di input.

  2. Stai compensando un bug del browser molto vario che un venditore * tosse * Mozilla * cough * si rifiuta di correggere e sono certi (nella misura in cui tieni regolari scambi con gli editor W3C e WHATWG) che devi avere una soluzione funzionante e questa soluzione non influenzerà lo stile di qualcosa di diverso dall’insetto che stai compensando.

Quando hai un elemento di larghezza del 100% con padding: 50px; ottieni effettivamente width: calc(100% + 100px); . Poiché il margin non viene aggiunto alla width , non causerà problemi di impaginazione imprevisti quando si utilizza il margin sugli child elements anziché il padding direttamente sull’elemento.

Quindi, se non stai facendo una di queste due cose, non aggiungi padding all’elemento ma ai suoi elementi figlio / figli diretti per assicurarti di ottenere il comportamento previsto in tutti i browser.

Diamo prima un’occhiata a quali sono le differenze e quali sono le responsabilità:

1) Margine

Le proprietà del margine CSS vengono utilizzate per generare spazio attorno agli elementi.
Le proprietà del margine impostano le dimensioni dello spazio bianco all’esterno del bordo. Con i CSS, hai il pieno controllo sui margini.
Esistono proprietà CSS per l’impostazione del margine per ciascun lato di un elemento (in alto, a destra, in basso ea sinistra).

2) Imbottitura

Le proprietà di riempimento CSS vengono utilizzate per generare spazio attorno al contenuto.
Il padding cancella un’area attorno al contenuto (all’interno del bordo) di un elemento.
Con i CSS, hai il pieno controllo sul padding. Ci sono le proprietà CSS per impostare il padding per ciascun lato di un elemento (in alto, a destra, in basso ea sinistra).

Quindi, semplicemente i margini sono spazi attorno agli elementi, mentre i padding sono spazi attorno ai contenuti che fanno parte dell’elemento.

Margine e imbottitura

Questa immagine dei codemancers mostra come si ottengono margini e confini e in che modo border box e content-box lo rendono diverso.

Inoltre definiscono ogni sezione come di seguito:

  • Contenuto : definisce l’area del contenuto della casella in cui risiedono i contenuti effettivi come testo, immagini o forse altri elementi.
  • Riempimento : cancella il contenuto principale dalla sua scatola di contenimento.
  • Bordo : circonda sia il contenuto che il riempimento.
  • Margine : quest’area definisce uno spazio trasparente che lo separa dagli altri elementi.

Margine CSS, riempimento e bordo sono proprietà del modello di box.

  • Il margine è lo spazio al di fuori del contenuto.
  • Il riempimento è lo spazio all’interno del contenuto.
  • Il bordo è un contorno visibile (qualsiasi colore, stile e larghezza) esterno al riempimento.

Larghezza totale = larghezza del contenuto + padding + bordo.

È utile conoscere le differenze tra margin e padding . Ecco alcune differenze:

  • Il margine è lo spazio esterno di un elemento, mentre il riempimento è lo spazio interno di un elemento.
  • Margine è lo spazio al di fuori del bordo di un elemento, mentre Padding è lo spazio all’interno del bordo di esso.
  • Margin accetta il valore di auto: margin: auto , ma non è ansible impostare Padding su auto.
  • Il margine può essere impostato su qualsiasi numero, ma il riempimento deve essere non negativo.
  • Quando si disegna un elemento, questo influenzerà anche il riempimento (es. Colore di sfondo), ma non il margine.

Margine

Il margine viene solitamente utilizzato per creare uno spazio tra l’elemento stesso e il suo contorno.

per esempio lo uso quando costruisco una barra di navigazione per farlo aderire ai bordi dello schermo e senza spazi bianchi.

Imbottitura

Di solito uso quando ho un elemento all’interno di un bordo,

o qualcosa di simile, e voglio ridurne le dimensioni ma al tempo voglio mantenere la distanza o il margine tra gli altri elementi attorno ad esso.

Quindi, brevemente, è situazionale; dipende da cosa stai cercando di fare.

Io uso sempre questo principio:

immagine del modello di scatola

Questo è il modello di box della funzione inspect di Firefox. Funziona come una cipolla:

  • Il tuo contenuto è nel mezzo.
  • Il riempimento è lo spazio tra il tuo contenuto e il bordo del tag all’interno.
  • Il confine e le sue specifiche
  • Il margine è lo spazio attorno al tag.

Quindi margini più grandi faranno più spazio intorno alla scatola che contiene i tuoi contenuti.

Una maggiore imbottitura aumenterà lo spazio tra il contenuto e la scatola di cui è dentro.

Nessuno di questi aumenterà o diminuirà la dimensione della scatola se è impostata su un valore specifico.

Il margine è fuori dalla scatola e l’imbottitura è all’interno della scatola