جمع شدن حاشیه‌ها چیست؟
جمع شدن حاشیه‌ها در CSS یکی از آن پدیده‌های جالب است که ممکن است گاهی باعث سردرگمی شود. این پدیده زمانی اتفاق می‌افتد که دو یا چند عنصر مجاور در وب‌صفحه دارای حاشیه‌های عمودی هم‌پوشانی هستند. در این حالت به جای این‌که حاشیه‌ها روی هم انباشته شوند، فقط بزرگ‌ترین آن‌ها به‌صورت یکپارچه لحاظ می‌شود.
نکته‌های کاربردی در مورد جمع شدن حاشیه‌ها
تصور کنید دو پاراگراف که هر دو دارای حاشیهٔ ۲۰ پیکسل هستند، به‌هنگام چیده شدن در کنار هم جمعیت به‌سوی فضای اضافی نخواهند رفت. در عوض، حاشیه‌های آن‌ها با هم جمع می‌شوند و به جای ۴۰ پیکسل، فقط ۲۰ پیکسل فضای کلی ایجاد می‌کنند. این امر می‌تواند طراحی وب را بهینه کند ولی در بعضی مواقع باعث سردرگمی نیز می‌شود.
نحوهٔ جلوگیری از جمع شدن حاشیه‌ها
خوشبختانه، جلوگیری از این پدیده نیز بسیار ساده است. یکی از روش‌ها این است که به المان‌ها برخی ویژگی‌های CSS مانند padding یا border اضافه کنیم. این کار معمولاً باعث شکستن جمع شدن حاشیه‌ها می‌شود و به ما اجازه می‌دهد کنترل بیشتری روی فاصله‌های عمودی داشته باشیم.
موارد خاص و استثناء‌ها
در نظر داشته باشید که جمع شدن حاشیه‌ها تنها برای حاشیه‌های عمودی اتفاق می‌افتد و حاشیه‌های افقی همان مقدار تعیین شده را حفظ می‌کنند. همچنین، اگر المان‌ها دارای ویژگیٔ float یا absolute position باشند، جمع شدن حاشیه‌ها رخ نخواهد داد.
نمونه کد ساده از جمع شدن حاشیه‌ها
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<p>پاراگراف اول</p>
<p>پاراگراف دوم</p>
</body>
</html>
توضیح خط به خط کد
<!DOCTYPE html>: نوع سند را به مرورگر اعلام می‌کند.
<html lang="en">: شروع سند HTML با زبان انگلیسی.
<head>: بخش اطلاعاتی که در مرورگر نمایش نمی‌یابد.
<meta charset="UTF-8">: تعیین کدگذاری کاراکترها برای نمایش صحیح.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: برای ریسپانسیو کردن صفحه در دستگاه‌های مختلف.
<style>...</style>: بخشی که استایل‌های CSS نوشته می‌شود.
p { margin-top: 20px; margin-bottom: 20px; }: تنظیم حاشیه بالا و پایین برای پاراگراف‌ها.
<body>: بدنۀ اصلی سند HTML که محتوا قرار می‌گیرد.
<p>پاراگراف اول</p>: نمایش پاراگراف اول.
<p>پاراگراف دوم</p>: نمایش پاراگراف دوم.
</body>: پایان بخش بدنه سند HTML.