Come disabilitare la compressione del margine tra elementi di pari livello

Probabilmente questo è un trucco molto stupido e noto, ma non ho ancora trovato alcuna soluzione. Ho provato "overflow", "content: ' '; display: table;", padding e 1pxborder. Nessun successo. Quindi ho fatto un piccolo esempio a questo problema.Come disabilitare la compressione del margine tra elementi di pari livello

Ci sono 2 elementi di blocco: intestazione con margine inferiore e piè di pagina con margine superiore. L'attività consiste nel sommare i margini: 50 + 49 = 99 px!

.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

fonte

2016-02-07 ieXcept

si potrebbe usare Flexbox perché non ha collapsing margins.

.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<div class="content"> 
 
    <header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
    </header> 
 

 
    <footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
    </footer> 
 
</div>

fonte

2016-02-07 18:14:50

+1 perché stavo usando FlexBox * * in attesa di crollare i margini e di iniziare tirando fuori i miei capelli, perché non sarebbe crollato. Puoi citare nelle specifiche dove dice che non collasseranno? – zero298

Per iniziare, il flexbox solution that @Nenad Vracar postato è la più valida.

un paio di alternative
Assumendo il problema è che non si sa se c'è qualcosa tra i due tag si potrebbe usare un selettore extra per questo caso (anche se sarebbe fallire se solo testo si trova tra i due tag in quanto sarebbe ancora applicare il margine di 99)

.main-header + .main-footer{margin-top:99px;}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

Ora, a seconda della situazione, è possibile utilizzare i trucchi che si menzionano e passare il margine agli pseudo-elementi.

.main-header:after { 
 
    content: ''; 
 
    margin-bottom: 50px; 
 
    display: table; 
 
} 
 

 
.main-footer:before { 
 
    content: ''; 
 
    display: table; 
 
    margin-top: 49px; 
 
} 
 

 
.main-header, 
 
.main-footer { 
 
    overflow: auto; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

fonte

2016-02-07 18:23:34

Come c'è adjacent siblings e dalla caduta margine prende il margine superiore, facciamo uso dell'operatore + CSS in modo che quando non ci sono altri elementi tra header e footer, aumentiamo il margin-top di footer a 99px

JS Fiddle

.main-header { 
 
    margin-bottom: 50px; 
 
    background-color: orange; 
 
} 
 
.main-footer { 
 
    background-color: skyblue; 
 
    margin-top: 49px; 
 
} 
 
.main-header + .main-footer { 
 
    /* only when there's no other elements between header and footer this will be applied */ 
 
    margin-top: 99px; 
 
}

<header class="main-header">HEADER Lorem ipsum dolor.</header> 
 

 
<footer class="main-footer">FOOTER <span>&copy;2015 Lorem ipsum dolor.</span></footer>

fonte

2016-02-07 18:25:52

Si potrebbe aggiungere un semplice float e clear:both, utilizzare ::before e ::after elementi pseudo.

Secondo MDN:

Margine collasso avviene in tre casi fondamentali:

fratelli adiacenti I margini di fratelli adiacenti vengono compressi (eccetto quando la sorella successivamente deve essere cancellato galleggianti passati).

.main-header::after, .main-footer::before { 
 
    content:''; 
 
    float:left; 
 
    width:100%; 
 
    clear:both; 
 
} 
 

 
.main-header::after { 
 
    margin-bottom: 50px; 
 
} 
 

 
.main-footer::before { 
 
    margin-top: 49px; 
 
}

<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

fonte

2016-02-07 18:33:12 Rhumborl

Si può galleggiare loro di disattivare i margini collasso, con width:100% a farle occupare l'intera larghezza, piuttosto che determinate dal contenuto.

.main-header, 
 
.main-footer { 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.main-header { 
 
    margin-bottom: 50px; 
 
} 
 
.main-footer { 
 
    margin-top: 49px; 
 
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1> 
 

 
<header class="main-header"> 
 
    HEADER Lorem ipsum dolor. 
 
</header> 
 

 
<footer class="main-footer"> 
 
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span> 
 
</footer>

fonte

2016-02-07 18:41:53 Stickers

Come disabilitare la compressione del margine tra elementi di pari livello

risposta

Problemi correlati