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