Domanda Quando usare il margine rispetto al padding nei CSS


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


1968
2018-02-03 03:20


origine


risposte:


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

Per me la più grande differenza tra imbottitura e margine è quella verticale i margini 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.


1213
2018-02-07 20:59



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.

enter image description here


1336
2018-02-03 03:22



Il meglio che ho visto spiegando questo con esempi, diagrammi e persino con una vista 'prova tu stesso' Qui.

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

enter image description here

Una cosa da tenere a mente sono i browser conformi agli standard (Le stranezze di IE sono un'eccezione) rende solo la parte del contenuto alla larghezza specificata, quindi tieni traccia di questo nei calcoli del layout. Si noti inoltre che la finestra di confine sta vedendo un po 'di a ritorno con Bootstrap 3 sostenendolo.


523
2018-05-04 19:21



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


76
2018-05-21 07:00



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

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

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

Quando decidi tra margine e padding, è una buona regola da usare margine quando stai spaziatura di un elemento in relazione ad altre cose sul muro, e imbottitura quando regoli l'aspetto dell'elemento stesso. Il margine non cambierà la dimensione dell'elemento, ma il riempimento in genere renderà l'elemento più grande1.

1  Questo modello di box predefinito può essere modificato con box-sizing attributo.


72
2017-12-17 01:10



Ecco alcuni HTML che dimostrano come padding e margin influire sulla possibilità di fare clic e riempire lo sfondo. Un oggetto riceve clic sul suo riempimento, ma i clic sull'area marginata di un oggetto 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>


30
2018-02-09 05:29



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

Come quando dai qualcosa {padding: 10px;}, dovrai ridurre la larghezza dell'elemento di 20px per mantenere l 'in forma'e non disturbare altri elementi intorno ad esso.

Quindi in genere inizio utilizzando i paddings per ottenere tutto 'packed'e quindi utilizzare i margini per piccole modifiche.

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.


30
2018-02-03 05:35



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.

enter image description here

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.


27
2017-08-01 11:28