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