چرا margin-top عمل نمیکند ؟

[<?php?>]

این لینک رو ببینید :
https://jsfiddle.net/mohammadhttp/guyjh7u4/

همانطور که میبینید من میخوام تنها تگ div فاصله از بالا 50 بگیره . اما رفته تگ main رو فاصله داده .



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

- - - Updated - - -

به main دستور زیر را دادم . ایا این روش در مرورگر ها ساپورت خوبی دارد :
overflow:hidden

[ایران نشر]

بجای

margin-top:50px;

باید از دستور زیر استفاده کنی

top: 50px;
position: relative;

[firebox]

توی CSS این مشکل زمانی هست که ، Margin دو یا چند تا Box با هم ترکیب میشه ، margin هایی که به این صورت ترکیب میشن رو collapsed margin میگن.
این مشکل زمانی به وجود میاد که دو یا چندتا box توی یک block-level باشن و block formatting context اونها هم مثل هم باشه و هیچ جداد کننده یا ، line boxes ، clearance ، padding یا border این Box ها رو از هم جدا نکنه.

برای حل این مشکل کافیه ، block formatting context یا block-level رو تغییر بدید.

راحل زیادی هست ، میتونی از float:left برای هر کدوم از المنت ها استفاده کنی ( هیچ وقت Margin بین floated box ها با هم collapse نمیشه)
استفاده از inline-block و overflow (تمام حالاتش به جز visible) یک block formatting context ایجاد میکنه و مانع collapse شدن میشه.
استفاده از position: relative و position: absolute یا استفاده از border هم اثر بالا رو داره و مانع collapse شدن میشه.

تمام این روش ها درست هستن ، انتخاب اینکه کدوم بهتره ، بستگی به خودتون داره ، از نظر پیشتیبانی مرورگرها هم، تمام این ها جزور CSS 2.1 هستن که ، از IE6 بالا ساپورت میشن و مشکلی ندارن (الان همه طراح ها ،‌ از جمله خودم، IE11 رو به عنوان بیس برای پشتیبانی ها اتنخاب میکنن)

پ.ن : اگر میخواهید ایجاد layout با CSS رو خیلی آسون تر انجام بدید ، پیشنهاد میکنم از Flex-box استفاده کنید.
این همین مثال شما با استفاده از flex-box هست.
https://jsfiddle.net/guyjh7u4/4/

[MJmoonwalk]

به main خصوصیت overflow: auto رو بده.

[topwebhost]

این لینک رو ببینید :
https://jsfiddle.net/mohammadhttp/guyjh7u4/

همانطور که میبینید من میخوام تنها تگ div فاصله از بالا 50 بگیره . اما رفته تگ main رو فاصله داده .



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

- - - Updated - - -

به main دستور زیر را دادم . ایا این روش در مرورگر ها ساپورت خوبی دارد :
overflow:hidden

سلام
برای اینکار شما باید ابتدا برای main مربوط float تعیین کنید پس میاییم به main میگیم که float: right;
حالا فاصله div نسبت به main سنجیده میشه و margin-top رو هرچه قدر خواستید میتونید ست کنید.

[ami-karimi]

به main
خاصیت : display: inline-block;
بدهید حل میشه