درک فروپاشی حاشیه در CSS

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

جعبه با حاشیه داخل یک جعبه با مریخ پایین تر باعث ایجاد مشکل زیادی می شود و باعث می شود این جعبه بیرونی اندازه حاشیه را کاهش دهد ، بنابراین اگر حاشیه 60px باشد ، پس از آن این جعبه به جای اینکه آن 60px را از بالای خود داشته باشد 60px را از بالا از دست می دهد تا این قسمت بالای آن را برطرف کند.
درونی Box با marginTop: "61px" در واقع باعث بیرونی می شود Box برای کوتاهتر 61 پیکسل و ایجاد جدایی از بالای صفحه. این اتفاق می افتد به دلیل حاشیه در حال فروپاشی در CSS

در اینجا توضیح مفصلی آورده شده است:

حاشیه در حال فروپاشی

• هنگامی که دو حاشیه عمودی لمس می شوند ، آنها به یک حاشیه واحد فرو می روند.
• اندازه حاشیه فروپاشی بزرگتر از این دو حاشیه است.

چگونه در کد شما اتفاق می افتد

1. حاشیه جعبه داخلی: درونی Box داشتن marginTop: "61px"بشر
2. جعبه بیرونی حاشیه اولیه: بیرونی Box حاشیه بالایی صریح ندارد. با این حال ، از آنجا که این اولین عنصر در بلوک حاوی آن است ، به طور موثری حاشیه برتر 0 را دارد.
3. سقوط حاشیه: حاشیه 61px داخلی Box با حاشیه 0px بیرونی فرو می ریزد Boxبشر حاشیه حاصل 61px است.
4. تأثیر روی جعبه بیرونی:
   • بیرونی Box به نظر می رسد که با 61 پیکسل به پایین هل داده می شود و جدایی را از بالا ایجاد می کند.
   • ارتفاع کلی بیرونی Box 61 پیکسل کاهش می یابد زیرا حاشیه خارج از منطقه محتوای عنصر است.

چگونه آن را اصلاح کنیم

در اینجا چند روش برای جلوگیری از فروپاشی حاشیه و دستیابی به طرح مورد نظر خود وجود دارد:

1. بالشتک را به جعبه بیرونی اضافه کنید:

   • اضافه کردن paddingTop به بیرونی Box یک منطقه محتوا ایجاد می کند که از درونی جلوگیری می کند Boxحاشیه از فروپاشی.

   <Box
       sx={{
           position: "relative",
           height: "100vh",
           overflowY: "hidden",
           "@media screen and (max-height:699px)": {
               overflowY: "visible",
               height: "auto",
               minHeight: "100vh"
           },
           paddingTop: "1px" // Or any value to prevent collapse
       }}
   >
       <Box
           sx={{
               marginTop: "61px",
               height: "24px"
           }}
       >
       Box>
   Box>
   

2. یک مرز به جعبه بیرونی اضافه کنید:

   • یک مرز همچنین جدایی را ایجاد می کند که از سقوط حاشیه جلوگیری می کند.

   <Box
       sx={{
           position: "relative",
           height: "100vh",
           overflowY: "hidden",
           "@media screen and (max-height:699px)": {
               overflowY: "visible",
               height: "auto",
               minHeight: "100vh"
           },
           borderTop: "1px solid transparent" // Or any border
       }}
   >
       <Box
           sx={{
               marginTop: "61px",
               height: "24px"
           }}
       >
       Box>
   Box>
   

3. استفاده کردن display: flow-root روی جعبه بیرونی:

   • display: flow-root یک زمینه جدید قالب بندی بلوک ایجاد می کند ، که از سقوط حاشیه جلوگیری می کند.

   <Box
       sx={{
           position: "relative",
           height: "100vh",
           overflowY: "hidden",
           "@media screen and (max-height:699px)": {
               overflowY: "visible",
               height: "auto",
               minHeight: "100vh"
           },
           display: "flow-root"
       }}
   >
       <Box
           sx={{
               marginTop: "61px",
               height: "24px"
           }}
       >
       Box>
   Box>
   

4. از یک عنصر بسته بندی استفاده کنید:

   • درونی را بپیچانید Box در عنصر دیگری که زمینه قالب بندی خاص خود را دارد.

   <Box
       sx={{
           position: "relative",
           height: "100vh",
           overflowY: "hidden",
           "@media screen and (max-height:699px)": {
               overflowY: "visible",
               height: "auto",
               minHeight: "100vh"
           }
       }}
   >
       <Box>
           <Box
               sx={{
                   marginTop: "61px",
                   height: "24px"
               }}
           >
           Box>
       Box>
   Box>
   

کدام راه حل را انتخاب کنید؟

• اگر می خواهید فضای داخل بیرونی را اضافه کنید Box، استفاده کنید paddingTopبشر
• اگر فقط می خواهید از سقوط جلوگیری کنید ، borderTop یا display: flow-root گزینه های خوبی هستند
• اضافه کردن یک عنصر بسته بندی نیز یک راه حل خوب است ، اما می تواند نشانه گذاری غیر ضروری اضافی را اضافه کند.

روشی را انتخاب کنید که مناسب طرح و نیازهای یک ظاهر طراحی شده شما باشد.