Quando utilizzare il margine rispetto al riempimento nel CSS [chiuso]

Quando si scrive CSS, esiste una regola o una linea guida particolare che dovrebbe essere usata per decidere quando usare margine quando usare 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 imbottitura e margine è che i margini verticali si auto-collassano e l'imbottitura no.

Considera due elementi uno sopra l'altro ciascuno con imbottitura di 1em. Questa imbottitura è considerata parte dell'elemento ed è sempre preservata.

Quindi finirai con il contenuto del primo elemento, seguito dal riempimento del primo elemento, seguito dal riempimento del secondo, seguito dal contenuto del secondo elemento.

Pertanto, il contenuto dei due elementi finirà per essere 2emseparato.

Ora sostituisci quell'imbottitura con un margine di 1em. I margini sono considerati esterni all'elemento e i margini degli elementi adiacenti si sovrapporranno.

Quindi, in questo esempio, finirai con il contenuto del primo elemento seguito dal 1emmargine combinato seguito dal contenuto del secondo elemento. Quindi il contenuto dei due elementi è solo a 1emparte.

Questo può essere davvero utile quando sai che vuoi dire 1emdi spaziare attorno a un elemento, indipendentemente da quale elemento sia accanto.

Le altre due grandi differenze sono che l'imbottitura è inclusa nell'area dei clic e il colore / l'immagine di sfondo, ma non il margine.

div.box > div { height: 50px; width: 50px; border: 1px solid black; text-align: center; }
div.padding > div { padding-top: 20px; }
div.margin > div { margin-top: 20px; }

<h3>Default</h3>
<div class="box">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>padding-top: 20px</h3>
<div class="box padding">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

<h3>margin-top: 20px; </h3>
<div class="box margin">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Il margine si trova all'esterno degli elementi del blocco mentre l'imbottitura è all'interno.

• Usa il margine per separare il blocco dalle cose al di fuori di esso
• Usa un'imbottitura per spostare il contenuto lontano dai bordi del blocco.

Il migliore che abbia mai visto spiegarlo con esempi, diagrammi e persino una vista "provalo tu stesso" è qui .

Lo schema seguente penso che dia una comprensione visiva istantanea della differenza.

Una cosa da tenere a mente è che i browser conformi agli standard (le stranezze di IE sono un'eccezione ) eseguono il rendering solo della porzione di contenuto alla larghezza data, quindi tieni traccia di ciò nei calcoli del layout. Si noti inoltre che il riquadro del bordo sta vedendo in qualche modo un ritorno con Bootstrap 3 che lo supporta.

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

Confronta gli elementi del blocco con le immagini appese a una parete:

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

Quando si decide tra margine e riempimento, è una buona regola empirica usare il margine quando si distanzia un elemento in relazione ad altre cose sul muro e il riempimento quando si regola l'aspetto dell'elemento stesso. Il margine non cambierà la dimensione dell'elemento, ma il riempimento in genere renderà l'elemento più grande ¹ .

¹ Questo modello di casella predefinito può essere modificato con l' box-sizingattributo .

MARGIN vs PADDING :

1. Il margine viene utilizzato in un elemento per creare la distanza tra quell'elemento e altri elementi della pagina. Dove viene utilizzato il riempimento per creare la 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 sotto l'immagine estratta dal margine Vs Padding - Proprietà CSS

Da https://www.w3schools.com/css/css_boxmodel.asp

Spiegazione delle diverse parti:

• Contenuto : il contenuto della casella, in cui vengono visualizzati testo e immagini

• Riempimento : cancella un'area attorno al contenuto. L'imbottitura è trasparente

• Bordo : un bordo che circonda l'imbottitura e il contenuto

• Margine : cancella un'area al di fuori del confine. Il margine è trasparente

Esempio live (prova a cambiare modificando i valori): https://www.w3schools.com/css/tryit.asp?filename=trycss_boxmodel

Ecco alcuni HTML che dimostrano come paddinge margininfluenzano la cliccabilità e il riempimento in background. Un oggetto riceve clic sul suo riempimento, ma i clic su un'area marginata degli oggetti 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;
}

<script src="http://code.jquery.com/jquery-latest.js"></script>

<div class="outer">
  <div class="inner" style="position:relative; height:0px; width:0px">

  </div>
</div>

Il vantaggio dei margini è che non devi preoccuparti della larghezza dell'elemento.

Come quando dai qualcosa {padding: 10px;}, dovrai ridurre la larghezza dell'elemento di 20 px per mantenere l' adattamento e non disturbare gli altri elementi circostanti.

Quindi generalmente inizio usando i padding per ottenere tutto ' packed' e quindi uso i margini per piccoli ritocchi.

Un'altra cosa da tenere presente è che i padding sono più coerenti su diversi browser e IE non tratta molto bene i margini negativi.

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

significa che il tuo elemento non è a conoscenza dei suoi margini esterni, quindi se stai sviluppando controlli web dinamici, ti consiglio di usare il padding contro il margine se puoi.

nota che alcune volte devi usare il margine.

È bene conoscere le differenze tra margine padding. Ecco alcune differenze:

• Il margine è lo spazio esterno di un elemento, mentre il riempimento è lo spazio interno di un elemento.

• Il margine è lo spazio esterno al bordo di un elemento, mentre il riempimento è lo spazio all'interno del bordo di un elemento.

• Il margine accetta il valore di auto:, margin: automa non è possibile impostare il riempimento su auto.

• Il margine può essere impostato su qualsiasi numero, ma il riempimento deve essere non negativo.

• Quando modifichi un elemento, anche il riempimento sarà influenzato (ad esempio il colore di sfondo), ma non il margine.

Una cosa da notare è che quando i margini di compressione automatica ti infastidiscono (e non stai usando i colori di sfondo sui tuoi elementi), qualcosa è solo più facile da usare l'imbottitura.

Spiegazione del margine avanzato rispetto all'imbottitura

È inappropriato utilizzare paddingper spaziare il contenuto in un elemento; si deve utilizzare l'elemento figlio , invece. I browser meno recenti come Internet Explorer hanno interpretato erroneamente il modello di casella, tranne quando si trattava di utilizzare, che funziona perfettamente in Internet Explorer 4 .marginmargin

Esistono due eccezioni quando l'uso padding è appropriato da usare:

1. Viene applicato a un elemento inline che non può contenere elementi figlio come un elemento di input.

2. Stai compensando un bug del browser molto vario che un fornitore * tossisce * Mozilla * tossisce * rifiuta di risolvere e sei certo (nella misura in cui intrattieni scambi regolari con gli editor W3C e WHATWG) che devi avere una soluzione funzionante e questa soluzione non influirà sullo stile di nient'altro che sul bug che stai compensando.

Quando hai un elemento di larghezza del 100% con padding: 50px;te, ottieni effettivamente width: calc(100% + 100px);. Dal momento che nonmargin viene aggiunto al non causerà problemi di layout imprevisti quando si utilizzawidthmargin su child elementsanziché paddingdirettamente sull'elemento.

Quindi, se stai non facendo una di queste due cose non aggiungere padding all'elemento, ma ad esso è figlio diretto / elemento di bambini (s) al fine di garantire che si vuole ottenere il previsto comportamento in tutti i browser.

Innanzitutto diamo 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 la dimensione dello spazio bianco al di fuori del bordo. Con CSS, hai il pieno controllo sui margini.
Esistono proprietà CSS per impostare il margine per ciascun lato di un elemento (in alto, a destra, in basso e a sinistra).

2) Riempimento

Le proprietà di riempimento CSS sono utilizzate per generare spazio attorno al contenuto.
L'imbottitura cancella un'area attorno al contenuto (all'interno del bordo) di un elemento.
Con CSS, hai il pieno controllo sull'imbottitura. Esistono proprietà CSS per l'impostazione del riempimento per ciascun lato di un elemento (in alto, a destra, in basso e a sinistra).

Quindi semplicemente i margini sono spazio attorno agli elementi, mentre il riempimento è spazio attorno al contenuto che fa parte dell'elemento.

Questa immagine dei codemancers mostra come margini e bordi si uniscono e in che modo il riquadro e il riquadro del contenuto lo rendono diverso.

Inoltre definiscono ogni sezione come di seguito:

• Contenuto : definisce l'area del contenuto della casella in cui risiede il contenuto reale 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 : questa area definisce uno spazio trasparente che lo separa da altri elementi.

Uso sempre questo principio:

Questo è il modello di scatola dalla funzione di ispezione dell'elemento in Firefox. Funziona come una cipolla:

• Il tuo contenuto è nel mezzo.
• Il riempimento è lo spazio tra il 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.

Un'imbottitura più grande aumenterà lo spazio tra il contenuto e la scatola di cui è contenuto.

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

Margine

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

per esempio lo uso quando sto costruendo una barra di navigazione per farla 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 momento voglio mantenere la distanza o il margine tra gli altri elementi che lo circondano.

In breve, è situazionale; dipende da cosa stai cercando di fare.

Il margine è fuori dagli schemi e l'imbottitura è all'interno degli stessi