1
Ich entwickle seit 3 Jahren Webseiten und fand heute etwas was ich nicht verstehen konnte. Der Code mit denen ich arbeite: http://pastie.org/1439629HTML/CSS Margin Ausgabe
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Page Title</title>
<style type="text/css" media="screen">
.box{
margin:50px 0;
background:red;
border:1px solid black;
}
</style>
</head>
<body>
<div class="box">
Y
</div>
<div class="box">
X
</div>
</body>
Nun ist die Frage, kann ich nicht herausfinden, warum die beiden Divs mit der Klasse BOX sind die gleiche Marge mitnutzen. h. der untere Rand auf Y ist derselbe wie der obere Rand von X. Sollte nicht ein Abstand von 100 Pixeln zwischen den zwei anstelle von 50 Pixeln vorhanden sein?
Edit: Wenn ich 50px CSS
.box{
margin:50px;
background:red;
border:1px solid black;
float:left;
height:50px;
width:50px;
}
dann ist der Abstand zwischen den beiden bearbeiten sollte noch, aber nein! jetzt ist es 100pixel. Warum?
Sorry für solch eine triviale Frage, aber ich konnte nicht herausfinden.
Ich weiß, dass ich nur unteren Rand geben kann: 50px für Abstand von 50px nach jedem div und verwenden Sie links Kind-Eigenschaft, um sicherzustellen, letzte div nicht 50px danach haben. Aber meine Frage ist, warum die Margen kombinieren? – Tarun
überprüfen Sie diesen Link. http://stackoverflow.com/questions/3906640/css-margins-overlap-problem – imez