تسلط بر سقوط حاشیه

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

سقوط حاشیه در سه مورد اساسی رخ می دهد:

حاشیه خواهران و برادران مجاور از بین می روند (به جز در مواردی که خواهر و برادر دوم نیاز به پاکسازی شناورهای گذشته دارند).

هیچ محتوایی که والدین و فرزندان را از هم جدا نمی کنند

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

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

مواردی که باید توجه داشته باشید:

• فروپاشی حاشیه پیچیده تری (بیش از دو حاشیه) در هنگام ترکیب موارد فوق رخ می دهد.
• این قوانین حتی در مورد حاشیه های صفر اعمال می شود ، بنابراین حاشیه یک فرزندان به خارج از والدین خود (طبق قوانین فوق) ختم می شود که آیا حاشیه والدین صفر است یا خیر.
• هنگامی که حاشیه های منفی درگیر می شوند ، اندازه حاشیه فروپاشی ، مجموع بزرگترین حاشیه مثبت و کوچکترین (منفی ترین) حاشیه منفی است.
• هنگامی که همه حاشیه ها منفی هستند ، اندازه حاشیه فروپاشی کوچکترین (منفی ترین) حاشیه است. این امر در مورد هر دو عنصر مجاور و عناصر تو در تو صدق می کند.
• حاشیه های فروپاشی فقط در جهت عمودی مرتبط هستند.
• حاشیه ها در یک ظرف با نمایشگر تنظیم شده روی Flex فرو نمی روند.

مثال ها

HTML

p>حاشیه پایین این پاراگراف فرو ریخته است ...p> p>… با حاشیه بالای این بند ، حاشیه ای ازرمز>1. 2remرمز>در بین.p> قسمت>این عنصر والدین شامل دو پاراگراف است!p>این پاراگراف دارای یک استرمز>. 4REMرمز>حاشیه بین آن و متن فوق.p> p>حاشیه پایین من با پدر و مادرم فرو می رود و حاشیه پایین آن را به همراه داردرمز>2REMرمز>. p> قسمت> p>من هستمرمز>2REMرمز>زیر عنصر بالاp> 

CSS

قسمت  لبه:2REM 0; زمینه:اسطوخودوس; > p  لبه:0. 4REM 0 1. 2REM 0; زمینه:رنگ زرد; > 

نتیجه

مشخصات فنی

همچنین ببینید

• مفاهیم کلیدی CSS:
  • نحو CSS
  • در حوزه های
  • نظرات
  • اختصاصی
  • وراثت
  • مدل جعبه
  • حالت های طرح بندی
  • مدل های قالب بندی بصری
  • ارزش های
    • مقادیر اولیه
    • مقادیر محاسبه شده
    • مقادیر استفاده شده
    • مقادیر واقعی

    با این صفحه مشکل محتوا پیدا کرده اید؟

    • صفحه را در GitHub ویرایش کنید.
    • گزارش محتوا را گزارش دهید.
    • منبع را در GitHub مشاهده کنید.

    این صفحه آخرین بار در 21 فوریه 2023 توسط همکاران MDN اصلاح شد.

    طرح شما برای اینترنت بهتر.

    مگد

    حمایت کردن

    • کمک محصول
    • گزارش یک موضوع

    جوامع ما

    توسعه دهنده

    • فن آوری های وب
    • توسعه وب را بیاموزید
    • MDN به علاوه
    • اطلاعیه حریم خصوصی وب سایت
    • بیسکویت ها
    • مجاز
    • دستورالعمل مشارکت جامعه

    به والدین غیر انتفاعی شرکت موزیلا ، بنیاد موزیلا مراجعه کنید. بخش هایی از این محتوا © 1998 - 2023 توسط مشارکت کنندگان mozilla. org است. محتوای موجود تحت مجوز Creative Commons.< Pan> برگه های سبک آبشار سطح 2 نسخه 2 (CSS 2. 2) مشخصات