Wie margin collapse zwischen Geschwisterelementen zu deaktivieren

Wahrscheinlich ist dies sehr dumm und gut bekannt Trick, aber ich habe noch keine Lösung gefunden. Ich habe versucht "overflow", "content: ' '; display: table;", padding und 1pxborder. Kein Erfolg. Also habe ich ein kleines Beispiel für dieses Problem gemacht.Wie margin collapse zwischen Geschwisterelementen zu deaktivieren

Es gibt 2 Blockelemente: Kopfzeile mit unterem Rand und Fußzeile mit oberem Rand. Die Aufgabe besteht darin, Ränder addieren zu lassen: 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>

Quelle

2016-02-07 ieXcept

Sie Flexbox verwenden könnte, weil es nicht collapsing margins hat.

.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>

Quelle

2016-02-07 18:14:50

+1, weil ich Flexbox mit * wurde erwartet * Margen kollabiert und beginnen meine Haare ziehen, weil sie nicht zusammenbrechen würde. Kannst du in der Spezifikation angeben, wo es heißt, dass sie nicht zusammenbrechen? – zero298

zu starten, die flexbox solution that @Nenad Vracar geschrieben ist die gültigste ein.

Ein paar Alternativen ist
das Problem der Annahme, dass Sie nicht wissen, ob es etwas zwischen den beiden Tags ist es, Ihnen einen zusätzlichen Selektor für diesen Fall nutzen könnten (obwohl es, wenn nur Text versagen ist zwischen den beiden Tags, da es immer noch die 99-Marge)

.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>

gelten würde

Jetzt können Sie je nach Situation die von Ihnen genannten Tricks verwenden und den Rand an die Pseudoelemente übergeben.

.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>

Quelle

2016-02-07 18:23:34

Da gibt es adjacent siblings und da die Marge Zusammenbruch der höheren Marge nimmt, wir von der + CSS Betreiber machen, so dass, wenn es keinen anderen Elemente zwischen header und footer, wir erhöhen die margin-top der footer bis 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>

Quelle

2016-02-07 18:25:52

Sie ein einfaches float und clear:both hinzufügen könnte, verwenden ::before und ::after Elemente Pseudo.

Per MDN:

Margin Kollabieren in drei grundlegende Fälle eintritt:

Benachbarte Geschwister Die Ränder von benachbarten Geschwister zusammengebrochen sind (außer wenn der spätere Geschwister muss vorbei schwimmt gelöscht werden).

.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>

Quelle

2016-02-07 18:33:12 Rhumborl

Sie können sie schwimmen die zusammenbrechenden Margen, mit width:100% zu deaktivieren, um sie über die gesamte Breite zu machen zu besetzen, anstatt durch den Inhalt bestimmt.

.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>

Quelle

2016-02-07 18:41:53 Stickers

Wie margin collapse zwischen Geschwisterelementen zu deaktivieren

Antwort

Verwandte Themen