Un semplice problema rapido con i margini CSS

Question

Ho sempre pensato che la teoria sottostante ai margini dei CSS fosse molto semplice. Un div con un margine di 10px creerà un cuscino di 10px attorno a quell'elemento. Quando due div sono affiancati, entrambi con un margine di 10px, il div è 20px a parte; entrambi gli elementi hanno un margine di 10px, con una distanza di 20px tra gli elementi. Questo sembra essere corretto, ed è quello che ho sempre creduto come fatto.

TUTTAVIA, ho scoperto di recente che se invece i due div sono affiancati e si posizionano uno sotto l'altro, il margine tra i due elementi è ora solo 10px. Cosa è successo al margine 10px emesso dall'altra div? Perché non c'è coerenza tra fianco a fianco e impilati verticalmente?

Un margine dice essenzialmente "non inserire nulla entro x pixel di me". Con "qualsiasi cosa", questo include i margini di altri elementi? Nel caso di side-side, la risposta sembra essere sì, il margine dice "non mettere nulla, incluso il tuo margine, entro x pixel di me". Nel caso di verticale, sembra consentire il secondo?

favore qualcuno può chiarire in modo da posso metterlo a letto e continuare con la mia serata :)

Answer 1

Ha a che fare con quando sono inline o inline-block cambia la loro proprietà in modo da impilare uno accanto all'altro senza collassare i margini insieme (che è normale, ma comportamento non intuitivo).

http://jsfiddle.net/xeCZJ/3/

Margini collasso quando sono presso la struttura predefinita display:block. È possibile utilizzare inline-block per far sì che si comportino come previsto, ma è necessario controllare manualmente le interruzioni di riga con br o con la larghezza dell'elemento contenitore.

Oppure è possibile utilizzare il riempimento anziché i margini.

Answer 2

Sembra che display:inline ignori tutti i margini superiore/inferiore, display:block consente di comprimere i margini e display:inline-block li somma insieme per un margine enorme. Checkout Questa jsFiddle ad esempio: http://jsfiddle.net/Z2nUN/4/

<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 

<hr /> 
<div class="allBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div> 

<hr /> 
<div class="allInlineBlock"> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
<p>Some content</p> 
<p>some more content</p> 
<p class="wideMargin">some more extra content</p> 
<p class="narrowMargin">less extra content</p> 
</div>​ 


p{ margin:10px; background:#ccc; display:inline;} 
.wideMargin{ margin:30px;} 
.narrowMargin{ 0px; } 
.allBlock p{ display:block;} 
.allInlineBlock p{ display:inline-block;}​ 

mai notato che. Oggi ho imparato, immagino.

EDIT: Aggiunto display: block e inline-block

Answer 3

Sembra che hai trovato la risposta da soli: i margini di collasso fanno parte della CSS2.1 recommendation e CSS3 working draft. Quest'ultimo dipende da block-progression, che è 'tb' (in alto -> in basso) per impostazione predefinita. Ciò comporterà solo il collasso dei margini superiore/inferiore. Al fine di comprimere destrorsi margini destre /, si dovrebbe usare block-progression:lr o block-progression:rl:

• Il margine sinistro di una casella A collassa con il margine sinistro della sua cassa principale B se i margini sono adiacenti e B è 'rl' o 'lr'.
• Il margine destro di una casella A collassa con il margine destro della casella padre B se i margini sono contigui e B è 'rl' o 'lr'.

Purtroppo block-progression non è nel newest working draft ed è molto improbabile che venga implementata da qualsiasi browser. Il modulo box CSS3 non è stato aggiornato dal 2007, quindi non è chiaro quando avrai una risposta definitiva.