So che questo è un vecchio problema, l'ho incontrato molte volte. Il problema è che tutte le correzioni qui sono hack che potrebbero avere conseguenze non intenzionali.
Prima di tutto, c'è una spiegazione semplice per il problema di root. A causa del modo in cui funziona il collasso dei margini, se il primo elemento all'interno di un contenitore ha un margine superiore, tale margine superiore viene effettivamente applicato al contenitore principale stesso. È possibile verificare ciò da soli effettuando quanto segue:
<div>
<h1>Test</h1>
</div>
In un debugger, aprire questo e passare il div. Noterai che il div stesso è posizionato in realtà dove il margine superiore dell'elemento H1 si ferma. Questo comportamento è inteso dal browser.
Quindi c'è una soluzione semplice a questo senza dover ricorrere a strani hack, come la maggior parte dei post qui (senza insulti destinati, è solo la verità) - semplicemente tornare alla spiegazione originale - ...if the first element inside a container has a top margin... - In seguito, avresti quindi bisogno del primo elemento in un contenitore per NON avere un margine superiore. Ok, ma come si fa senza aggiungere elementi che non interferiscano semanticamente con il tuo documento?
Facile! Gli pseudo-elementi! Puoi farlo attraverso una lezione o un mixin predefinito.Aggiungi un :before pseudo-elemento:
CSS tramite una classe:
.top-margin-fix:before {
content: ' ';
display: block;
width: 100%;
height: .0000001em;
}
Con questo, seguendo l'esempio di marcatura sopra si dovrebbe modificare la div come tale:
<div class="top-margin-fix">
<h1>Test</h1>
</div>
Perché funziona?
Il primo elemento in un contenitore, se non ha margine superiore, imposta la posizione dell'inizio del margine superiore dell'elemento successivo. Aggiungendo uno pseudo-elemento :before, il browser aggiunge effettivamente un elemento non semantico (in altre parole, buono per SEO) nel contenitore genitore prima del il tuo primo elemento.
Q. Perché l'altezza: .0000001em?
A. È necessaria un'altezza per il browser per spingere verso il basso l'elemento margine. Questa altezza è effettivamente zero, ma ti permetterà comunque di aggiungere padding al contenitore genitore stesso. Poiché è effettivamente zero, non avrà alcun effetto sul layout del contenitore. Bellissimo.
Ora puoi aggiungere una classe (o meglio, in SASS/LESS, un mixin!) Per risolvere questo problema invece di aggiungere strani stili di visualizzazione che causeranno conseguenze inattese quando vuoi fare altre cose con i tuoi elementi, volutamente eliminare i margini sugli elementi e/o sostituirli con padding, o strani stili di posizione/float che non sono pensati per risolvere questo problema.
'overflow: hidden' è migliore per il 90% dei casi. – vsync
Perché esagerare: nascosto essere migliore? – peterchon
@peterchon - perché auto può causare overflow scrollbars – vsync