مدل قاب: ترکیب حاشیه‌های CSS

ترکیب حاشیه‌ها به این معنی است که وقتی دو حاشیه عمودی با هم برخورد می‌کنند، آن‌ها یک حاشیه تشکیل می‌دهند.

ارتفاع حاشیه ترکیب شده برابر با بزرگترین ارتفاع حاشیه‌های ترکیب شده است.

ترکیب حاشیه‌ها

ترکیب حاشیه‌ها (افزایش) یک مفهوم نسبتاً ساده است. اما، در عمل، هنگام طراحی صفحات وب، می‌تواند باعث بروز بسیاری از ابهامات شود.

به طور ساده، ترکیب حاشیه‌ها به این معنی است که وقتی دو حاشیه عمودی با هم برخورد می‌کنند، آن‌ها یک حاشیه تشکیل می‌دهند. ارتفاع حاشیه ترکیب شده برابر با بزرگترین ارتفاع حاشیه‌های ترکیب شده است.

وقتی یک عنصر روی عنصر دیگری قرار دارد، حاشیه بیرونی پایین عنصر اول با حاشیه بیرونی بالا عنصر دوم ترکیب می‌شود. تصویر زیر را ببینید:

CSS کا بیرونی حاشیه متحد نمونه 1

یک بار شخصاً امتحان کنید

وقتی یک عنصر در داخل عنصر دیگری قرار دارد (فرض کنید حاشیه داخلی یا لبه‌ای وجود ندارد که حاشیه بیرونی را جدا کند)، حاشیه بیرونی بالا و یا پایین آن‌ها نیز با هم ترکیب می‌شوند. تصویر زیر را ببینید:

CSS کا بیرونی حاشیه متحد نمونه 2

یک بار شخصاً امتحان کنید

با اینکه ممکن است کمی عجیب به نظر برسد، حاشیه‌ها حتی می‌توانند با خودشان ترکیب شوند.

مقصد داریم یک عنصر خالی باشد که دارای حاشیه بیرونی باشد اما بدون لبه یا پُرکن، در این حالت، حاشیه بیرونی بالا و پایین با هم برخورد می‌کنند و با هم ترکیب می‌شوند:

CSS کا بیرونی حاشیه متحد نمونه 3

اگر یہ بیرونی حاشیه دوسرے عناصر کی بیرونی حاشیه سے ملتا ہوا تو، وہ بھی متحد ہو جائیں گے:

CSS کا بیرونی حاشیه متحد نمونه 4

یہ یہی وجہ ہے کہ یہ سلسلہ پاراگراف عناصر کو بہت کم فضاء کا استعمال کرتا ہے، کیونکہ ان کی تمام بیرونی حاشیه متحد ہوتی ہیں اور ایک چھوٹی بیرونی حاشیه بنتی ہیں۔

بیرونی حاشیه متحد ابتدائی طور پر کچھ عجیب دیکھ رہا ہوا ہو سکتا ہے، لیکن واقعی میں یہ معنویت رکھتا ہے۔ کچھ پاراگرافوں سے بنیادی متن پیج کا مثال بھیجیں، پہلے پاراگراف کی سائز کی سطح بیرونی حاشیه کی سطح سے برابر ہوتی ہے۔ اگر بیرونی حاشیه متحد نہ ہو تو، تمام پاراگرافوں کے بیچ کی بیرونی حاشیه سمت بالا اور نیچے کی بیرونی حاشیه کا مجموعہ ہوگا۔ یہ معنوتی سے پاراگرافوں کے بیچ کی سائز دوگنا ہوتی ہے۔ اگر بیرونی حاشیه متحد ہو تو، پاراگرافوں کی بیچ کی سمت بالا اور نیچے کی بیرونی حاشیه متحد ہوتی ہیں، جس سے یہ سائز یکساں ہوتی ہیں۔

CSS کا بیرونی حاشیه متحد کی واقعی معنویت

نوٹ:فقط عادی دستور بجلی میں بلاک کا عمودی بیرونی حاشیه متحد ہوتا ہے، درجلی کا بلاک، فلوٹ یا مکمل قرار دادن کے بیرونی حاشیه متحد نہیں ہوتا ہے。