CSS, div annidati e amp; margini vs. imbottitura

StackOverflow https://stackoverflow.com/questions/1419519

  •  07-07-2019
  •  | 
  •  

Domanda

Capisco perfettamente il modello di scatola. questa domanda riguarda più il tentativo di definire una metodologia semantica su quando usare i margini e quando usare il riempimento.

ecco un tipico esempio

prima, in un inglese semplice:

  • situazione: abbiamo un div contenitore, all'interno del quale è presente un elemento di paragrafo.

  • obiettivo: avere uno spazio di 12px tra l'interno del div e l'esterno del paragrafo.

  • opzione a) applica 12px di riempimento al div contenitore

  • opzione b) applica margini di 12px all'elemento paragrafo

o, se preferisci, HTML: 

<div id="container">
    <p>Hello World!</p>
</div>

e CSS:

opzione a) 

div#container {padding: 12px;}

opzione b) 

p {margin: 12px;}

Cheers!

Jon

È stato utile?

Soluzione

Personalmente, preferisco l'opzione A. Perché? Dì ora che devo aggiungere altri elementi HTML nel div e voglio che il padding venga mantenuto, non dovrei aggiungere altre regole ai miei file CSS per farlo funzionare.

Altri suggerimenti

Le imbottiture e i margini danno lo stesso effetto, tranne nei casi seguenti (potrei perdere alcuni):

  1. Hai qualche tipo di proprietà di sfondo. I margini non li capiranno.
  2. Hai un bordo
  3. Si utilizza TD (senza margini)
  4. Due elementi nidificati, i margini vengono compressi insieme, dove non sono presenti le imbottiture.
  5. (è necessario controllare questo) Probabilmente influenzano diversamente la larghezza e l'altezza dell'elemento. (Se qualcuno lo sa meglio, per favore modifica questo).

Questo è un bug in CSS, ecco alcuni esempi:

http://creexe.zxq.net/div-issue-padding.html = problema di riempimento

http://creexe.zxq.net/div-issue-margin.html = problema di margine

i tag div rossi e verdi negli esempi sono stati creati dalla proprietà css TOP, ma ha i suoi svantaggi in quanto TOP, BOTTOM ecc funziona solo quando la posizione del tag div è assoluta e relativa, ma non statica

Dipende da cosa stai cercando di realizzare visivamente. container avrebbe altri elementi figlio che potrebbero appendere nella grondaia su entrambi i lati del paragrafo? In tal caso, un margine ha più senso. Ma se container dovrebbe avere una grondaia di 12 pixel per tutti gli elementi, punto, ha più senso usare il padding per evitare di dover applicare margini a più set di elementi.

In generale, si desidera sempre che i paragrafi abbiano margini verticali per garantire una costante coerenza dei paragrafi.

Personalmente, sceglierei l'opzione a #container {padding: 12px;} perché chiarisce ampiamente che tutti gli elementi figlio devono stare a 12px di distanza dal confine di questo div.

Se voglio che altri elementi rimangano a più di 12px dal bordo del #container , allora applico più margine a quell'elemento.

Cheers!

Riempimento verticale sulla divisione - perché se decidessi di volere una diversa quantità di spazio verticale tra i vari paragrafi utilizzerei i margini inferiori e il riempimento superiore / inferiore della divisione che racchiuderà praticamente rimarrà sempre intatto assumendo hai solo elementi posizionati staticamente all'interno.

La differenza è dove si trova il bordo.

Il bordo si trova SMACK DAB nel mezzo dei margini e dell'imbottitura. Se si specificano i margini, si tratta di uno spazio bianco ESTERNO al bordo.

Se specifichi un'imbottitura, ovvero uno spazio bianco ALL'INTERNO del bordo (spinge il bordo più lontano dall'elemento)

Non puoi mostrarti qui a causa della rimozione dei CSS, ma prova questo: 

<body style="background-color: #aaa">
<p style="background-color: #aee; margin: 40px; padding: 40px; border: solid 2px black;">
  i have margins, padding and a border.
</p>

<p style="background-color: #aee; margin: 40px; padding: 0; border: solid 2px black;">
  i have margins, and a border.
</p>

<p style="background-color: #aee; margin: 0; padding: 40px; border: solid 2px black;">
  i have padding and a border.
</p>
</body>

altre cose!

    L'imbottitura

  • porta il colore di sfondo dell'elemento, i margini sono sostanzialmente trasparenti

  • alcuni elementi (come td) sembrano ignorare i margini, mentre rispondono ai cambiamenti nel riempimento

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top