CSS: Margin-top, wenn Elternteil hat keine Grenze

Wie Sie sehen können, in dieses Bild, ich habe eine orange div im grünen div mit keine Obere Grenze. Die orange div hat eine 30px oberen Rand, aber es drängt auch die grünen div nach unten. Natürlich, das hinzufügen einer oberen Grenze das Problem zu beheben, aber ich brauche die grüne div top-randlos. Was könnte ich tun?

CSS:

.body {
	border: 1px solid black;
	border-top: none;
	border-bottom: none;
	width: 120px;
	height: 112px;
	background-color: lightgreen;
}

.body .container {
	background-color: orange;
	height: 50px;
	width: 50%;
	margin-top: 30px;
}

HTML:

<div class="header">Top</div>
<div class="body">
	<div class="container">Box</div>
</div>
<div class="foot">Bottom</div>

Dank

  • Können Sie näher auf den gewünschten Effekt? Wollen Sie text innerhalb der orange container angezeigt werden 30 Pixel vom oberen oder willst du die Oberseite der orange container angezeigt werden 30 Pixel unterhalb der Oberkante des grün-container?
  • Verwandte Frage: stackoverflow.com/questions/315738/...
  • Könnte sein, mehr geeignet für doctype.com
  • Verwandte: klar und Zusammenbruch fix.
InformationsquelleAutor Manny | 2009-09-08
  1. 88

    Könnte man hinzufügen overflow:auto zu .body um zu verhindern, dass margin-collapsing. Sehen http://www.w3.org/TR/CSS2/box.html#collapsing-margins

    • juhuu, gerade hat mich gerettet aus verrückt mit meinem verschwinden Marge!
    • Ich hatte das gleiche problem, fährt mich verrückt, weil ich nicht wollen, eine Grenze, das mein Problem behoben, danke für die info und den link, hilft, erklärt, warum dies geschieht.
    • Margin collapsing scheint eine seltsame Sache zu haben als ein Standard, jeder bekam ein gutes Beispiel, wenn Sie möchten, es zu benutzen?
    • Guten doc auf die Marge kollabiert: developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing
    InformationsquelleAutor Fabian
  2. 9

    Was Sie erleben, ist die Marge kollabiert. Die Marge ist nicht angegeben, ein Bereich um ein element, sondern der minimale Abstand zwischen den Elementen.

    Als der grüne container hat keine border oder padding, es wird nichts zu enthalten, der Rand der orange element. Die Marge wird zwischen dem oberen element und dem orange element, gerade als ob der grüne container hätte die Marge.

    Verwenden Sie eine Polsterung in dem grünen container anstelle von einer Marge auf das orange element.

    InformationsquelleAutor Guffa
  3. 1

    Verwenden padding statt margin:

    .body .container {
    ...
    padding-top: 30px;
}
    InformationsquelleAutor Tomas Aschan
  4. 1

    Nicht sicher, ob dies in Ihrem Fall nicht, aber ich habe gerade das Problem gelöst mit der folgenden CSS-Eigenschaften

    #element {
    padding-top: 1px;
    margin-top: -1px;
}

    #element wurde nach unten gedrückt, weil es das erste Kind-element hatte eine margin-top: 30px. Mit diesem CSS, es funktioniert jetzt wie erwartet 🙂 Nicht sicher, ob es Arbeit für jeden Fall, YMMV.

    InformationsquelleAutor alex
  5. 0

    Können Sie entweder fügen padding-top: 30 auf die grüne box, die relative Positionierung auf die orange box mit top: 30px oder schweben die orange box und verwenden die gleichen margin-top: 30px.

    InformationsquelleAutor Jonathan Patt
  6. 0

    Lesen Sie bitte dieses Dokument:
    Box-Modell - Marge kollabiert

    CSS

    .body {
    border: 1px solid black;
    border-bottom: none;
    border-top: none;
    width: 120px;
    height: 112px;
    background-color: lightgreen;
    padding-top: 30px;
}

.body .container {
    background-color: orange;
    height: 50px;
    width: 50%;
}
    InformationsquelleAutor ranonE
  7. 0

    Nicht sicher, wie hackish das klingt, aber wie über das hinzufügen einer transparenten Grenze?

    InformationsquelleAutor finferflu
Schreibe einen Kommentar