CSS: Rand oben, wenn Eltern keine Grenze haben

Wie Sie in this picture sehen können, habe ich eine orange div in einem grünen div ohne oberen Rand. Die Orange div hat eine 30px oberen Rand, aber es drückt auch die grüne div nach unten. Natürlich, das Hinzufügen eines oberen Rahmens wird das Problem beheben, aber ich brauche die grüne div oben randlos sein. Was könnte ich tuen?CSS: Rand oben, wenn Eltern keine Grenze haben

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

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

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

Dank

Quelle

2009-09-08 Manny

Können Sie den gewünschten Effekt näher ausführen? Soll der Text innerhalb des orangefarbenen Containers 30 Pixel von oben erscheinen oder soll der obere Teil des orangefarbenen Containers 30 Pixel unter dem oberen Rand des grünen Containers erscheinen? – Mayo

In Verbindung stehende Frage: http://stackoverflow.com/questions/315738/unexpected-margin-with-very-simple-html – mercator

Könnte für http://doctype.com/ – Nobody

Sie könnten overflow:auto zu .body hinzufügen, um das Kollabieren der Ränder zu verhindern. Siehe http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Quelle

2009-09-08 15:57:11 Fabian

woot, rettete mich gerade mit meinem verschwindenden Rand verrückt! –

Ich hatte das gleiche Problem, fuhr mich wahnsinnig, weil ich keine Grenze haben möchte, das behob mein Problem, danke für die Info, und der Link hilft erklärt, warum das passiert. – jimplode

Margin Collapsing scheint eine seltsame Sache als Standard zu haben, hat jemand ein gutes Beispiel dafür, wann Sie es verwenden möchten? – opsb

Verwenden padding statt margin:

.body .container { 
    ... 
    padding-top: 30px; 
}

Quelle

2009-09-08 15:45:55

Sie entweder padding-top: 30 auf dem grünen Feld hinzufügen können, verwenden Sie relative Positionierung auf die Box mit top: 30px oder schwimme die orange Box und verwenden Sie das gleiche margin-top: 30px.

Quelle

2009-09-08 15:50:03

Sie lesen Sie dieses Dokument: Box model - Margin collapsing

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%; 
}

Quelle

2009-09-08 15:52:18 ranonE

Was Sie erleben Marge ist kollabiert. Der Rand legt keinen Bereich um ein Element fest, sondern den Mindestabstand zwischen Elementen.

Da der grüne Container keinen Rand oder Abstand hat, enthält der Rand des orangefarbenen Elements nichts. Der Rand wird zwischen dem oberen Element und dem orangefarbenen Element verwendet, als ob der grüne Container den Rand hätte.

Verwenden Sie eine Auffüllung im grünen Container anstelle eines Rands auf dem orangefarbenen Element.

Quelle

2009-09-08 15:56:53 Guffa

Nicht sicher, wie haschisch das klingt, aber wie wäre es mit einem transparenten Rahmen hinzufügen?

Quelle

2010-02-20 01:07:53 finferflu

nicht sicher, ob dies in Ihrem Fall funktionieren wird, aber ich dies nur gelöst mit den folgenden CSS-Eigenschaften

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

#element wurde nach unten gedrückt wird, weil es das erste Kind Element ist ein margin-top: 30px hatte. Mit diesem CSS funktioniert es nun wie erwartet :) Nicht sicher, ob es für jeden Fall funktioniert, YMMV.

Quelle

2010-05-10 01:06:26 alex

CSS: Rand oben, wenn Eltern keine Grenze haben

Antwort

Verwandte Themen