مشکل با margin

ساخت وبلاگ

سلام دوستان با وارد کردن کدهای زیر انتظار داشتن این خروجی رو داشتم:
https://jsfiddle.net/#&togetherjs=kxCLa0L2fN
1.jpg

<!DOCTYPE html><html>
<head>
<link type="text/css" rel="stylesheet" href="1.css" />
</head>
<body>
<div id="main">
<div id="header">
<div id="top_menu"></div>
</div>
</div>
</body>
</html>
body { background-color:#c0c0c0;
}
#main {
width:1280px;
height:1500px;
border:1px solid black;
background-color:#fafafa;
margin:auto;
}
#header {
width:1280px;
height:174px;
background-color:blue;
}
#top_menu {
width:1202px;
height:39px;
background-color:black;
border-radius:3px;
margin:auto;
margin-top:133px;
}

که نتیجه این شد:2.jpg
سوالم اینه که چرا margin مربوط به top_menu فاصلش رو با div والد خودش که header هست مقایسه نمیکنه؟
و مقایسه با کدوم div انجام میشه و چرا؟ آیا میشه تغییرش داد؟ در این موارد چه روشی پیشنهاد میشه

- - , .

برنامه نویس...
ما را در سایت برنامه نویس دنبال می کنید

برچسب : نویسنده : محمد رضا جوادیان programers بازدید : 205 تاريخ : چهارشنبه 30 دی 1394 ساعت: 18:26