CSS -Margin -Macken - Bitte helfen Sie mir zu verstehen
https://stackoverflow.com/questions/1683066
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Warum gibt es bei der Verwendung des Randes für das untergeordnete Element (H2) das übergeordnete (#Box) stattdessen Rand? Wenn ich die Marge in die Polsterung wechsle, funktioniert es wie erwartet. Hat sich etwas verändert oder fehlt mir etwas? Hier ist mein Beispielcode
<html>
<head>
<style>
#box{
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
height:200px;
width:500px;
background:red;
box-shadow: 15px 15px 12px grey;
-moz-box-shadow: 15px 15px 12px grey;
-webkit-box-shadow: 15px 15px 12px grey;
text-align:center;
margin-top:0;
}
#box h2{
color:#fff;
text-shadow: 2px 2px 2px #000;
margin-top:75px;/*making this padding gives the effect I thought I could achieve with margin*/
height:50px;
width:200px;
}
</style>
</head>
<body>
<div id="box">
<h2>Fun with CSS3</h2>
</div>
</body>
</html>
Auch wenn jemand oder jeder seine Erfahrungen mit Margin -Macken teilen könnte. Danke
Lösung
Es ist wegen von Kollapsränder. Ich hasse dieses "Feature", aber das ist die Ursache für die Rendering -Probleme, die Sie haben. Ein Auszug aus den Spezifikationen (Hervorhebung liegt bei mir):
Wenn die oberen und unteren Ränder einer Box angrenzen, ist es möglich, dass Ränder zusammenbrechen durch es. In diesem Fall hängt die Position des Elements von seiner Beziehung zu den anderen Elementen ab, deren Ränder zusammengebrochen werden.
- Wenn die Ränder des Elements mit dem oberen Rand seines Elternteils zusammengebrochen sind, ist der obere Randkante der Box als der gleiche wie die des Elternteils definiert.
Hier sind ein paar Artikel zu diesem Thema:
Andere Tipps
Ich vermute, dass Sie das Boxmodell missverstanden haben. Der Rand ist der Raum draußen, dh rund um ein Widget, während die Polsterung im Inneren Platz ist, dh zwischen dem Außenrand des Widgets und seinem Inhalt.
Vielleicht möchten Sie sich dieses Diagramm ansehen: http://www.w3.org/tr/css2/box.html des Boxmodells als Referenz.
Ich denke, es funktioniert in Ordnung. Polsterung macht genau das: Es padelt das Element, auf das es angewendet wird. Der Rand trennt Elemente voneinander. Der Rand funktioniert also so, wie er sollte. Die Position des H2 -Tags ist dort, wo es sein sollte. Das Geben eines Randes würde es vom Wurzelelement wegdrängen, was in diesem Fall der Körper ist. Damit es sich im übergeordneten Element (der #Box Div) bewegen kann, müssten Sie es entweder relativ zum #Box -Element positionieren oder ihm eine Polsterung geben (nur eine Methode, aber nicht optimal).
