درود

ببینید وقتی ما تو این مثال از margin-bottom استفاده میکنیم، میخوایم که هر کدوم از اون بخشها پایینشون یه فاصله 20 پیکسلی بیفته تا برای کاربر چشم نواز باشه. پس:

وقتی به یکی از دیوها مارجین میدیم فقط برای همون فاصله میندازه و ساختار رو خراب میکنه (شکل 1 پیوست رو ببینید)

وقتی به خود تگ article مارجین میدیم همه دیوها به هم میچسبند و برای خود article که دیو پدر هست فاصله اعمال میشه که دراینجا برای ما فایده نداره (شکل 2 پیوست رو ببینید)

وقتی به همه دیوها مارجین میدیم رای همه فاصله میندازه و ساختار درست نمایش میشه (شکل 3 پیوست رو ببینید)

بله خیلی ممنون از شما ولی چرا وقتی به یک تگ دیو تو این مثال مارجین باتم 1 پیکسل میدهیم انگار 60 پیکسل اعمال میشه؟

به علت استفاده همزمانش از col هست.

• وظیفه col اینه که بیاد اون بخش رو به ابعاد مساوی تقسیم کنه و اختصاص بده و هر سه تا کنار هم بیان.
• وقتی فقط به یکی مارجین میدید بخاطر به هم ریختگی کلا باکس تو اون بخش قرار نمیگیره و اون محوطه رو خالی میذاره.
• اونی که شما میبینید یهو 60 پیکسل افتاده پایینتر برای مارجین نیست، اون در اصل باکس آخره که چون ردیف جا نداشته اومده ردیف بعدی نشسته.

بله خیلی ممنون واقعا الان تیک سبز هم میزنم فقط قبلش اخرین سوال من چطور میتونم مانند شما تئوریم و انالیز کردن این اتفاقات رو قوی کنم؟ چون حس میکنم الان من این رو نمیپرسیدم اصلا نمیتونستم دلیل باگش رو متوجه بشم