پاسخ : چرا margin-top عمل نمیکند ؟
توی 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/
پاسخ با نقل قول