Differenza tra margine e imbottitura?

Qual è esattamente la differenza tra margine e padding nei CSS? Non sembra davvero servire molto allo scopo. Potresti darmi un esempio di dove si trovano le differenze (e perché è importante conoscere la differenza)?

paddingè lo spazio tra il contenuto e il border, mentre marginè lo spazio al di fuori del confine. Ecco un'immagine che ho trovato da una rapida ricerca su Google, che illustra questa idea.

Una cosa chiave che manca nelle risposte qui:

I margini superiore / inferiore sono pieghevoli.

Quindi se hai un margine di 20px nella parte inferiore di un elemento e un margine di 30px nella parte superiore dell'elemento successivo, il margine tra i due elementi sarà 30px anziché 50px. Questo non si applica al margine sinistro / destro o al riempimento.

Il margine viene applicato all'esterno del tuo elemento, influenzando quindi la distanza del tuo elemento da altri elementi.

L'imbottitura viene applicata all'interno del tuo elemento, determinando in che misura il contenuto del tuo elemento è lontano dal bordo.

Inoltre, l'utilizzo del margine non influirà sulle dimensioni del tuo elemento mentre il riempimento renderà le dimensioni dei tuoi elementi (imposta altezza + riempimento), ad esempio se hai un div 100x100px con un riempimento 5 px, il tuo div sarà effettivamente 105x105px

Ricorda questi 3 punti:

• Il margine è lo spazio extra attorno al controllo.
• L'imbottitura è uno spazio extra all'interno del controllo.
• Il riempimento di un controllo esterno è il margine di un controllo interno .

Demo Image: (dove la scatola rossa è il controllo del desiderio)

La definizione più semplice è; imbottitura è uno spazio dato all'interno del bordo dell'elemento contenitore e il margine è dato all'esterno. Per un elemento che non è un contenitore, l'imbottitura potrebbe non avere molto senso, ma il margine sicuramente aiuta a sistemarlo.

L'imbottitura è spazio all'interno del bordo, mentre il margine è spazio all'esterno del bordo.

Imbottitura

Il riempimento è una proprietà CSS che definisce lo spazio tra il contenuto di un elemento e il suo bordo (se ha un bordo). Se un elemento ha un bordo attorno ad esso, il riempimento darà spazio da quel bordo al contenuto dell'elemento che appare in quel bordo. Se un elemento non ha un bordo attorno, l'aggiunta del riempimento non ha alcun effetto su quell'elemento, perché non c'è bordo da cui dare spazio.

Margine

Il margine è una proprietà CSS che definisce lo spazio dall'esterno di un elemento al successivo elemento esterno.

Il margine influenza elementi che hanno entrambi o non hanno bordi. Se un elemento ha un bordo, il margine definisce lo spazio da questo bordo al successivo elemento esterno. Se un elemento non ha un bordo, allora margin definisce lo spazio dal contenuto dell'elemento al successivo elemento esterno.

Differenza tra imbottitura e margine

Quindi la differenza tra margine e imbottitura è che mentre l'imbottitura si occupa dello spazio interno, il margine si occupa dello spazio esterno verso l'elemento esterno successivo.

Una delle differenze chiave tra margine e padding non è menzionata in nessuna delle risposte: clickability e rilevamento hover

Aumentando l'imbottitura si aumenta la dimensione effettiva dell'elemento. A volte ho un'icona piccola che non voglio rendere visibilmente più grande, ma l'utente deve comunque interagire con quell'icona. Aumento l'imbottitura dell'icona per dargli un footprint più ampio per clic e hover. Aumentare il margine dell'icona non avrà lo stesso effetto.

Una risposta a un'altra domanda su questo argomento fornisce un esempio.

margine = spazio attorno (all'esterno) all'elemento dal bordo esterno.

padding = spazio attorno (all'interno) all'elemento dal testo al bordo.

vedi qui: http://jsfiddle.net/robx/GaMpq/

È bene conoscere le differenze tra margine padding. Come so:

• Il margine è lo spazio esterno di un elemento, mentre il riempimento è lo spazio interno di un elemento. In altre parole, il margine è lo spazio esterno al bordo di un elemento, mentre il riempimento è lo spazio all'interno del bordo.
• È possibile impostare il autovalore su margine. Tuttavia, non è consentito per l'imbottitura. Vedere questo .
  Nota: utilizzare margin: autoper centrare un elemento a blocco all'interno del suo genitore in senso orizzontale. Inoltre, è possibile centrare un elemento all'interno di un flexbox in verticale o in orizzontale o entrambi, impostando il margine su auto. Vedere questo .
• Il margine può essere qualsiasi numero float, ma il riempimento non deve essere negativo.
• Quando modifichi un elemento, anche l'imbottitura sarà disegnata; ma non margine. Il margine ottiene lo stile dell'elemento genitore. Ad esempio, quando si imposta la background-colorproprietà su nero, il suo spazio interno (ovvero il riempimento) sarà nero, ma non il suo spazio esterno (ovvero il margine).

Il margine è spazio fuori dagli schemi; l'imbottitura è spazio all'interno della scatola. È difficile vedere la differenza con un riempimento bianco, ma con un riempimento colorato puoi vederlo bene.

Il margine e l'imbottitura sono in realtà entrambi i tipi di imbottitura .... Uno (margine) va al di fuori del bordo degli elementi per distanziarlo dagli altri elementi e l'altro (imbottitura) va al di fuori del contenuto degli elementi per distanziare il contenuto dal bordo degli elementi.

L'imbottitura consente allo sviluppatore di mantenere lo spazio tra il testo e l'elemento racchiuso. Il margine è lo spazio che l'elemento mantiene con un altro elemento del DOM padre.

Vedi esempio:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UT-8">
    <title>Pseudo Elements</title>
    <style type="text/css">
        body{font-family:Arial; font-size:16px; background-color:#f8e6ae; color:#888;}
        .page
        {
            background-color: #fff;
            padding: 10px 30px 50px 50px;
            margin:30px 100px 30px 300px;
        }
    </style>
</head>
<body>
    <div class="page">
        Notice the distance between the top and this text. Then compare it with the distance between the bottom border and the this text. 
    </div>
</body>

Il margine è una proprietà nel CSS utilizzata per creare spazi attorno agli elementi, al di fuori del bordo. Il programmatore può impostare il margine superiore, destro, inferiore e sinistro. In altre parole, può impostare quei valori usando margin-top, margin-right, margin-bottom e margin-left.

I valori del margine possono essere dei seguenti tipi.

Innanzitutto, auto consente al browser di calcolare il margine. Inoltre, length indica un margine in px, pt o cm, mentre% aiuta a descrivere un margine in percentuale rispetto alla larghezza dell'elemento contenitore. Infine, ereditare indica che il margine deve ereditare dall'elemento padre.

Il riempimento è una proprietà nei CSS che aiuta a creare spazio attorno a un elemento all'interno del bordo. Il programmatore può impostare l'imbottitura per superiore, destra, inferiore e sinistra. In altre parole, può impostare quei valori usando padding-top, padding-right, padding-bottom e padding-left.

I valori di riempimento possono essere dei seguenti tipi.

La lunghezza descrive il riempimento in px, pt o cm, mentre% indica il riempimento come percentuale relativa alla larghezza dell'elemento contenitore. Infine, eredit descrive che il padding dovrebbe essere ereditato dall'elemento parent.

 div.special {
          width:200px; 
          border-style: solid; 
          border-width:thin; 
          border-color:#000;
          margin:30px 20px 10px 25px;
}     
div.special2 {
          width:200px;
          border-style: solid;
          border-width:thin;
          border-color:#000;
          padding:30px 20px 10px 25px;
}        

<div class="special">
             Hello its margin test 
</div>
<div class="special2">
            Hello its padding test
</div>

Differenza tra margine e imbottitura

Il margine è una proprietà CSS utilizzata per creare spazio attorno all'elemento all'esterno del bordo definito, mentre il riempimento è una proprietà CSS utilizzata per creare spazio attorno all'elemento, all'interno del bordo definito. Pertanto, questo spiega la principale differenza tra margine e imbottitura.

Valori Inoltre, i valori di margine possono essere auto, lunghezza,% o eredità, mentre i valori di riempimento possono essere lunghezza,% o tipo ereditario. Quindi, questa è un'altra differenza tra margine e imbottitura.

In breve, margin e padding sono due proprietà nei CSS che consentono di dare uno stile alle pagine web. Non è possibile assegnare valori negativi per tali proprietà. La differenza principale tra margine e riempimento è che il margine aiuta a creare spazio attorno all'elemento al di fuori del bordo, mentre il riempimento aiuta a creare spazio attorno all'elemento all'interno del bordo.

Prova a mettere un colore di sfondo su un blocco div con larghezza e altezza. Vedrai che il riempimento aumenta la dimensione dell'elemento, mentre il margine lo sposta semplicemente all'interno del flusso del documento.

Il margine è specifico per spostare l'elemento in giro.

Il riempimento è lo spazio tra i componenti più vicini sulla pagina Web e il margine è lo spazio dal margine della pagina Web.

Una cosa che ho appena notato, ma nessuna delle risposte sopra menzionate. Se ho un elemento DOM creato dinamicamente che viene inizializzato con contenuto html interno vuoto, è una buona pratica utilizzare il margine anziché il riempimento se non si desidera che questo elemento vuoto occupi spazio se non viene creato il suo contenuto.

C'è una differenza importante:

Il margine si trova all'esterno dell'elemento, vale a dire che uno applicherà lo spostamento degli spazi bianchi "dopo" l'inizio dell'elemento. Il riempimento è all'interno, l'altro applicherà lo spazio "prima" dell'elemento.

Il margine viene applicato all'esterno del tuo elemento, influenzando quindi la distanza del tuo elemento da altri elementi.

L'imbottitura viene applicata all'interno del tuo elemento, determinando in che misura il contenuto del tuo elemento è lontano dal bordo.

Inoltre, l'utilizzo del margine non influirà sulle dimensioni del tuo elemento mentre il riempimento renderà le dimensioni dei tuoi elementi (imposta altezza + riempimento), ad esempio se hai un div 100x100px con un riempimento 5 px, il tuo div sarà effettivamente 105x105px

Fondamentalmente, la differenza tra imbottitura e margine viene in termini di sfondo. Il riempimento deciderà lo spazio tra i contenuti, mentre il margine deciderà il bordo esterno degli elementi!

Il riempimento è lo spazio tra il contenuto e il bordo. Dove come margine è lo spazio tra il bordo e l'altro elemento.