CSS Margin Collapse
گاهی اوقات، حاشیه‌های دو عنصر در CSS به یک حاشیه‌ی واحد کاهش می‌یابند. این پدیده به عنوان فروپاشی حاشیه‌ها (Margin Collapse) شناخته می‌شود.
فروپاشی حاشیه چیست؟
حاشیه‌های بالا و پایین عناصر گاهی اوقات با هم ترکیب می‌شوند و یک حاشیه‌ی واحد ایجاد می‌کنند که برابر با بزرگ‌ترین حاشیه بین آن‌ها است.
توجه کنید که این اتفاق فقط برای حاشیه‌های بالا و پایین رخ می‌دهد، نه برای حاشیه‌های چپ و راست.
مثال فروپاشی حاشیه:
h1 {
margin: 0 0 50px 0; /* حاشیه‌ی پایین h1 برابر با 50px است */
}
h2 {
margin: 20px 0 0 0; /* حاشیه‌ی بالای h2 برابر با 20px است */
}در این مثال، عنصر <h1> دارای حاشیه‌ی پایینی ۵۰px و عنصر <h2> دارای حاشیه‌ی بالایی ۲۰px است. منطق عمومی نشان می‌دهد که حاشیه عمودی بین این دو عنصر باید مجموع ۷۰px باشد (۵۰px + ۲۰px). اما به دلیل فروپاشی حاشیه، حاشیه نهایی بین این دو عنصر ۵۰px خواهد بود که همان بزرگ‌ترین مقدار بین دو حاشیه است.
نکات مهم:
- فقط حاشیه‌های عمودی (بالا و پایین) فروپاشیده می‌شوند.
- حاشیه‌های افقی (چپ و راست) به هم فروپاشی نمی‌شوند و به همان صورت که تعریف شده‌اند باقی می‌مانند.
تمام خواص CSS مربوط به حاشیه:
- margin: تنظیم همه حاشیه‌ها به صورت shorthand (بالا، راست، پایین، چپ).
- margin-bottom: تنظیم حاشیه‌ی پایین یک عنصر.
- margin-left: تنظیم حاشیه‌ی چپ یک عنصر.
- margin-right: تنظیم حاشیه‌ی راست یک عنصر.
- margin-top: تنظیم حاشیه‌ی بالای یک عنصر.
این خواص برای مدیریت فواصل بین عناصر بسیار کاربردی هستند و با استفاده درست از آن‌ها می‌توان طراحی صفحات را بهینه کرد.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام