ترکیب حاشیه CSS
- صفحه قبل حاشیه CSS
- صفحه بعدی پادکناره CSS
ترکیب حاشیه‌ها به این معناست که وقتی دو حاشیه‌ی عمودی با هم برخورد می‌کنند، آنها یک حاشیه تشکیل می‌دهند.
ارتفاع حاشیه‌ی ترکیب شده برابر با بزرگترین ارتفاع بین دو حاشیه‌ی ترکیب شده است.
ترکیب حاشیه‌ها
ترکیب حاشیه‌ها (ادغام) یک مفهوم نسبتاً ساده است. اما، در عمل، هنگام طراحی صفحات وب، می‌تواند باعث بروز بسیاری از ابهام شود.
به طور خلاصه، ترکیب حاشیه‌ها به این معناست که وقتی دو حاشیه‌ی عمودی با هم برخورد می‌کنند، آنها یک حاشیه تشکیل می‌دهند. ارتفاع حاشیه‌ی ترکیب شده برابر با بزرگترین ارتفاع بین دو حاشیه‌ی ترکیب شده است.
وقتی یک عنصر در بالای یک عنصر دیگر قرار می‌گیرد، حاشیه‌ی پایینی عنصر اول با حاشیه‌ی بالای عنصر دوم ترکیب می‌شود. به تصویر زیر نگاه کنید:
وقتی یک عنصر در داخل یک عنصر دیگر قرار می‌گیرد (فرض کنید بدون پادروسی یا حاشیه که حاشیه‌ها را جدا می‌کنند)، حاشیه‌های بالای و/یا پایینی آنها نیز ترکیب می‌شوند. به تصویر زیر نگاه کنید:
با اینکه ممکن است به نظر کمی عجیب باشد، اما حاشیه‌ها حتی می‌توانند با خودشان ترکیب شوند.
فرض کنید یک عنصر خالی وجود داشته باشد که حاشیه دارد، اما بدون حاشیه یا پرکننده. در این حالت، حاشیه‌ی بالای و پایینی با هم برخورد می‌کنند و ترکیب می‌شوند:
اگر این حاشیه با حاشیه‌ی یک عنصر دیگر برخورد کند، ترکیب خواهد شد:
این دلیل کمی فضای اشغال شده توسط عناصر پاراگراف است، زیرا تمام حاشیه‌های آنها به هم ترکیب می‌شوند و یک حاشیه‌ی کوچک تشکیل می‌دهند.
در نگاه اول ممکن است ترکیب حاشیه‌ها عجیب به نظر برسد، اما در واقع، این مفهوم دارای معنایی است. به عنوان مثال، در یک صفحه‌ی متنی معمولی که از چندین پاراگراف تشکیل شده است، فضای بالای اولین پاراگراف برابر با حاشیه‌ی بالای پاراگراف است. اگر ترکیب حاشیه‌ها رخ ندهد، حاشیه‌های بین همه‌ی پاراگراف‌های بعدی برابر با مجموع حاشیه‌ی بالای و پایینی آنها خواهد بود. این به این معناست که فضای بین پاراگراف‌ها دو برابر فاصله‌ی بالای صفحه خواهد بود. اگر ترکیب حاشیه‌ها رخ دهد، حاشیه‌های بالای و پایینی پاراگراف‌ها با هم ترکیب می‌شوند و فاصله‌ها یکسان می‌شوند.
توضیح:تنها حاشیه‌های عمودی جعبه‌های بلوک در جریان عادی مستندات، ترکیب حاشیه‌ها خواهد شد. حاشیه‌های بین جعبه‌های خطی، جعبه‌های شناور یا جعبه‌های موقعیتیت绝对的 ترکیب نمی‌شوند.
همه‌ی متغیرهای حاشیه‌ی CSS
| ویژگی | توضیح |
|---|---|
| margin | استفاده از یک属性 مختصر برای تنظیم属性 مارگین در یک جمله. |
| margin-bottom | تنظیم مارگین پایین عنصر. |
| margin-left | تنظیم مارگین چپ عنصر. |
| margin-right | تنظیم مارگین راست عنصر. |
| margin-top | تنظیم مارگین بالای عنصر. |
- صفحه قبل حاشیه CSS
- صفحه بعدی پادکناره CSS
