terrore margine CSS; Margine aggiunge spazio al di fuori dell'elemento genitore

I miei margini css non si comportano nel modo in cui io voglio o mi aspetto che lo facciano. Mi sembra che la mia intestazione margin-top influenzi i tag div che lo circondano.terrore margine CSS; Margine aggiunge spazio al di fuori dell'elemento genitore

Questo è quello che voglio e mi aspetto: What I want....

... ma questo è quello che io alla fine con: What I get...

Fonte:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Margin test</title> 

<style type="text/css"> 
body { 
    margin:0; 
} 
#page { 
    margin:0; 
    background:#FF9; 
} 
#page_container { 
    margin:0 20px; 
} 
h1 { 
    margin:50px 0 0 0; 
} 
</style> 

</head> 

<body> 

<div id="page"> 
    <div id="page_container"> 
     <header id="branding" role="banner"> 
      <hgroup> 
       <h1 id="site-title"><span><a href="#" title="Title" rel="home">Title</a></span></h1> 
       <h2 id="site-description">Description</h2> 
      </hgroup> 
     </header> 
    </div> 
</div>

Ho esagerato il margine in questo esempio le. Il margine predefinito del browser su h1-tag è leggermente più piccolo e nel mio caso uso il bootstrap Twitter con Normalizer.css che imposta il margine predefinito su 10px. Non è così importante, il punto principale è; Non posso, non dovrei, non voglio cambiare il margine sul tag h1.

Immagino sia simile alla mia altra domanda; Why does this CSS margin-top style not work?. La domanda è: come posso risolvere questo problema specifico?

Ho letto a few threads su problemi simili, ma non ho trovato risposte e soluzioni reali. So che l'aggiunta di o border:1px; risolve il problema. Ma questo aggiunge solo nuovi problemi, dal momento che non voglio un padding né un bordo sui miei tag div.

Ci deve essere una soluzione migliore, migliore pratica? Questo deve essere abbastanza comune.

fonte

2012-11-26 jamietelin

hai iniziato un reset CSS? –

Io uso Normalizer.css. Ma non è questo il problema. Se rimuovo il tag h1. Non c'è problema. Il problema è che voglio un margine sul mio tag h1 e che sta influenzando gli elementi circostanti. – jamietelin

Puoi [pubblicare una demo] (http://jsfiddle.net/) per caso? –

128

Aggiungi overflow:auto al tuo #page div.

jsFiddle example

E verificare collapsing margins mentre siete a questo.

fonte

2012-11-26 21:49:28 j08691

Questo funziona. Trovato un sacco di esempi qui (http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html) e alcuni buoni spiegando. Nessuna soluzione è davvero soddisfacente al 100%. Ma immagino che si debba solo conviverci, il margine deve funzionare in questo modo o la formattazione del testo sarebbe impossibile. Il 99% delle volte funziona come è necessario. Ma ogni tanto arriva il problema quando si progetta un layout. : P – jamietelin

overflow: nascosto; ha funzionato anche per me e ha funzionato meglio per me nel mio scenario. – stuyam

Il problema era che il genitore non prendeva in considerazione i bambini per l'altezza. L'aggiunta di display:inline-block; lo ha fatto per me.

completa CSS

#page { 
    margin:0; 
    background:#FF9; 
    display:inline-block; 
    width:100%; 
}

See Fiddle

fonte

2012-11-26 21:51:13 jonBreizh

Aggiungere una delle seguenti regole:

float: left/right; 
position: absolute; 
display: inline-block; 
overflow: auto/scroll/hidden; 
clear: left/right/both;

questo è causato da collapsing margins. Vedere un articolo su questo comportamento here.

Secondo l'articolo:

La specifica W3C definisce collasso margini come segue:

“In questa descrizione, l'espressione collasso margini significa che margini adiacenti (senza contenuto non vuoto, padding, o zone di confine, o spazio li separano) di due o più scatole (che può essere uno accanto all'altro o nidificato) si combinano per formare un unico margine.”

Questo è vero anche per l'eleme genitori-figli nti.

Tutte le risposte comprendono una delle possibili soluzioni:

Esistono altre situazioni in cui elementi non hanno i loro margini crollati:

elementi galleggiavano

elementi posizionati in modo assoluto

elementi di blocco in linea

elementi con troppopieno impostato su qualcosa di diverso da visibl e (Essi non collassano i margini con i loro figli.)

elementi cancellati (Essi non collassano i loro margini superiore con il margine inferiore del loro blocco padre.)

l'elemento principale

fonte

2017-02-06 14:09:15 Ziarno

terrore margine CSS; Margine aggiunge spazio al di fuori dell'elemento genitore

risposta

Problemi correlati