PDA

View Full Version : مشکل با margin



majidbayat
چهارشنبه 30 دی 1394, 14:34 عصر
سلام دوستان با وارد کردن کدهای زیر انتظار داشتن این خروجی رو داشتم:
https://jsfiddle.net/#&togetherjs=kxCLa0L2fN
138517

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






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

mmm201
چهارشنبه 30 دی 1394, 15:34 عصر
سلام دوستان با وارد کردن کدهای زیر انتظار داشتن این خروجی رو داشتم:
https://jsfiddle.net/#&togetherjs=kxCLa0L2fN
138517

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






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

برای header# کد overflow:hidden را اضافه کنید

majidbayat
چهارشنبه 30 دی 1394, 16:08 عصر
از پاسختون ممنونم ولی بیشتر به دنبال چرایی این موضوع هستم. چون بعد از طرح سوال با چند بار آزمایش و تغییر display به inline-block مشکل حل شد.