css - pagina - padding sport




Quando usare il margine rispetto al padding nei CSS (12)

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 ?


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, <div> 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.


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 colori 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.


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 .


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.

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.

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.


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


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

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

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.


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.


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.


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

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


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


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.





margin