نمایش نسخه قابل چاپ
این لینک رو ببینید :
https://jsfiddle.net/mohammadhttp/guyjh7u4/
همانطور که میبینید من میخوام تنها تگ div فاصله از بالا 50 بگیره . اما رفته تگ main رو فاصله داده .
بابت راهنمایی تشکر دوستان
- - - Updated - - -
به main دستور زیر را دادم . ایا این روش در مرورگر ها ساپورت خوبی دارد :
overflow:hidden
بجای
باید از دستور زیر استفاده کنیکد HTML:margin-top:50px;
کد HTML:top: 50px;
position: relative;
توی 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/
به main خصوصیت overflow: auto رو بده.
سلامنقل قول:
نوشته اصلی توسط <?php?>
برای اینکار شما باید ابتدا برای main مربوط float تعیین کنید پس میاییم به main میگیم که float: right;
حالا فاصله div نسبت به main سنجیده میشه و margin-top رو هرچه قدر خواستید میتونید ست کنید.
به main
خاصیت : display: inline-block;
بدهید حل میشه