Кто-нибудь знает, почему я не получаю верхнее поле в первом div на основе CSS ниже?Это делает то же самое в Chrome, Safari и Firefox 4, работающих на Mac OSX Lion (то же самое отображается в Snow Leopard).Я ожидаю, что первый элемент будет отображаться с полем в 5 пикселей по всему внутреннему элементу (за исключением, очевидно, нижнего), а не только справа и слева.Почему маржа также не будет применена к вершине?Даже если я укажу margin-top: 5px в CSS, он все равно не будет отображаться так, как я ожидал.
<!DOCTYPE html>
<html>
<head>
<style>
.outer{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
}
.inner{
background-color:white;
margin:5px;
}
.shim{
height:1px;
}
.outer2{
background-color:red;
width:100px;
height:100px;
margin-bottom:20px;
padding:5px;
}
.inner2{
background-color:white;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
Margin
</div>
</div>
<div class="outer">
<div class="shim"></div>
<div class="inner">
Margin+Shim
</div>
</div>
<div class="outer2">
<div class="inner2">
Padding
</div>
</div>
</body>
</html>