مجموعه استاندارد برای حاشیه

فهرست

توجه: چندین بخش از این مشخصات توسط سایر مشخصات به روز شده است. لطفاً ، "برگه های سبک آبشار (CSS) - تعریف رسمی" را در آخرین عکس فوری CSS برای لیستی از مشخصات و بخش هایی که جایگزین می کنند ، ببینید.

کارگروه CSS همچنین در حال توسعه CSS سطح 2 نسخه 2 (CSS 2. 2) است.

مدل CSS Box جعبه های مستطیل شکل را که برای عناصر موجود در درخت اسناد تولید می شود ، توصیف می کند و مطابق با مدل قالب بندی بصری قرار می گیرد.

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

[D]

حاشیه ، مرز و بالشتک را می توان به بخش های بالا ، راست ، پایین و چپ تقسیم کرد (به عنوان مثال ، در نمودار ، "LM" برای حاشیه سمت چپ ، "RP" برای بالشتک راست ، "سل" برای مرزهای برتر و غیره.).

محیط هر یک از چهار حوزه (محتوا ، بالشتک ، مرز و حاشیه) "لبه" نامیده می شود ، بنابراین هر جعبه دارای چهار لبه است:

لبه محتوا یا لبه داخلی لبه محتوا مستطیل داده شده توسط عرض و ارتفاع جعبه را احاطه کرده است ، که اغلب به محتوای ارائه شده عنصر بستگی دارد. چهار لبه محتوا جعبه را تعریف می کنند. لبه بالشتک لبه بالشتک جعبه جعبه را احاطه کرده است. اگر بالشتک دارای 0 عرض باشد ، لبه بالشتک همان لبه محتوا است. چهار لبه بالشتک جعبه را تعریف می کنند. لبه مرزی لبه مرزی مرز جعبه را احاطه کرده است. اگر مرز دارای 0 عرض باشد ، لبه مرزی همان لبه بالشتک است. چهار لبه مرزی جعبه را تعریف می کنند. لبه حاشیه یا لبه بیرونی لبه حاشیه حاشیه جعبه را احاطه کرده است. اگر حاشیه دارای 0 عرض باشد ، لبه حاشیه همان لبه مرزی است. چهار لبه حاشیه جعبه را تعریف می کنند.

هر لبه ممکن است به لبه بالا ، راست ، پایین و لبه چپ شکسته شود.

ابعاد منطقه محتوای یک جعبه - و - به چندین عامل بستگی دارد: این که آیا عنصر تولید جعبه دارای مجموعه "عرض" یا "ارتفاع" است ، چه جعبه حاوی متن باشد یا جعبه های دیگر ، چه جعبه باشد. جدول ، و غیره. عرض و ارتفاع جعبه در فصل جزئیات مدل قالب بندی بصری بحث شده است.

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

این مثال نشان می دهد که چگونه حاشیه ها ، بالشتک ها و مرزها در تعامل هستند. مثال سند HTML:

منجر به یک درخت مستند با (از جمله روابط دیگر) یک عنصر UL که دارای دو فرزند لی است.

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

[D]

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

8. 3 خواص حاشیه: "حاشیه-بالا" ، "حاشیه راست" ، "حاشیه پایین" ، "حاشیه چپ" و "حاشیه"

خصوصیات حاشیه عرض ناحیه حاشیه یک جعبه را مشخص می کند. ملک "حاشیه" حاشیه ای را برای هر چهار طرف تعیین می کند ، در حالی که سایر خصوصیات حاشیه فقط سمت خود را تعیین می کند. این خصوصیات برای همه عناصر اعمال می شود ، اما حاشیه های عمودی هیچ تاثیری در عناصر درون خطی ندارند.

خصوصیات تعریف شده در این بخش به نوع مقدار اشاره دارد ، که ممکن است یکی از مقادیر زیر را به خود اختصاص دهد:

عرض ثابت را مشخص می کند. درصد با توجه به عرض بلوک حاوی جعبه تولید شده محاسبه می شود. توجه داشته باشید که این در مورد "حاشیه" و "حاشیه پایین" نیز صادق است. اگر عرض بلوک حاوی به این عنصر بستگی داشته باشد ، طرح حاصل در CSS 2. 1 تعریف نشده است. خودکار بخش محاسبه عرض و حاشیه های رفتار را ببینید.

مقادیر منفی برای خصوصیات حاشیه مجاز است ، اما ممکن است محدودیت های خاص پیاده سازی وجود داشته باشد.

این خصوصیات هیچ تاثیری در عناصر درون خطی غیر تنظیم شده ندارند.

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

ملک "حاشیه" یک ویژگی کوتاه برای تنظیم "حاشیه" ، "حاشیه راست" ، "حاشیه حاشیه" و "حاشیه چپ" در همان مکان در برگه است.

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

آخرین قانون مثال بالا معادل مثال زیر است:

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

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

حاشیه های افقی هرگز از بین نمی روند.

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

  در صورتی که هر یک از حاشیه های مؤلفه آن در مجاورت آن حاشیه باشد ، حاشیه فروپاشی در مجاورت حاشیه دیگر در نظر گرفته می شود.

  توجه داشته باشید. حاشیه های مجاور می توانند توسط عناصری ایجاد شوند که به عنوان خواهر و برادر یا اجداد مرتبط نیستند.

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

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

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

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

  8. 4 ویژگی های بالشت

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

  خصوصیات تعریف شده در این بخش به نوع مقدار اشاره دارد ، که ممکن است یکی از مقادیر زیر را به خود اختصاص دهد:

  بر خلاف خصوصیات حاشیه ، مقادیر مقادیر بالشتک نمی توانند منفی باشند. مانند خصوصیات حاشیه ، مقادیر درصد برای خواص بالشتک به عرض بلوک حاوی جعبه تولید شده اشاره دارد.

  این خصوصیات بالا ، راست ، پایین و بالشتک یک جعبه را تنظیم می کنند.

  خاصیت "بالشتک" یک خاصیت کوتاه برای تنظیم "بالشتک-بالا" ، "بالشتک-راست" ، "بالشتک پایین" و "بالشتک چپ" در همان مکان در برگه است.

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

  رنگ سطح یا تصویر ناحیه بالشتک از طریق خاصیت "پس زمینه" مشخص شده است:

  مثال بالا ، یک بالشتک عمودی "1EM" ("بالشتک-بالا" و "بالشتک") و یک بالشتک افقی "2EM" ("حق بالاد" و "Padding-Left") را مشخص می کند. واحد 'em' نسبت به اندازه قلم عنصر است: '1EM' برابر با اندازه قلم مورد استفاده است.

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

  توجه داشته باشید. به ویژه برای HTML ، نمایندگان کاربر ممکن است مرزهایی را برای برخی از عناصر رابط کاربری (به عنوان مثال ، دکمه ها ، منوها و غیره) متفاوت از عناصر "معمولی" ایجاد کنند.

  8. 5. 1 عرض مرزی: "مرز مرزی" ، "در عرض مرز" ، "مرز مرز" ، "عرض مرزی-چپ" و "مرز مرزی"

  خصوصیات عرض مرزی عرض منطقه مرزی را مشخص می کند. خصوصیات تعریف شده در این بخش به نوع مقدار اشاره دارد ، که ممکن است یکی از مقادیر زیر را به خود اختصاص دهد:

  یک مرز نازک. یک مرز متوسط. یک مرز ضخیم ضخیم. ضخامت مرز دارای یک مقدار صریح است. عرض مرزی صریح نمی تواند منفی باشد.

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

  علاوه بر این ، این عرض ها باید در طول یک سند ثابت باشند.

  این خصوصیات عرض بالا ، راست ، پایین و مرز چپ یک جعبه را تنظیم می کند.

  این ملک یک ملک کوتاه برای تنظیم "مرزهای مرزی" ، "در عرض مرز" ، "مرز مرز" و "عرض مرزی چپ" در همان مکان در برگه است.

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

  در مثالهای زیر ، نظرات نشان دهنده عرض های حاصل از مرزهای بالا ، راست ، پایین و چپ است:

  8. 5. 2 رنگ مرزی: "رنگ مرزی" ، "رنگ راست مرز" ، "رنگ مرزی" ، "رنگ چپ مرز" و "رنگ مرزی"

  خصوصیات رنگ مرزی رنگ مرز یک جعبه را مشخص می کند.

  خاصیت "رنگ مرزی" رنگ چهار مرز را تعیین می کند. مقادیر معانی زیر را دارند:

  خاصیت "رنگ مرزی" می تواند از یک تا چهار مقدار مؤلفه داشته باشد ، و مقادیر در طرف های مختلف به عنوان "مرز مرز" تنظیم می شوند.

  اگر رنگ مرزی یک عنصر با یک ویژگی مرزی مشخص نشده باشد ، نمایندگان کاربر باید از مقدار خاصیت "رنگ" عنصر به عنوان مقدار محاسبه شده برای رنگ مرزی استفاده کنند.

  در این مثال ، مرز یک خط سیاه جامد خواهد بود.

  8. 5. 3 سبک مرزی: "به سبک مرزی" ، "به سبک راست" ، "سبک مرزی" ، "به سبک مرزی" و "به سبک مرزی"

  ویژگی های سبک مرزی سبک خط مرز یک جعبه (جامد ، دوتایی ، متلاشی و غیره) را مشخص می کند. خصوصیات تعریف شده در این بخش به نوع مقدار اشاره دارد ، که ممکن است یکی از مقادیر زیر را به خود اختصاص دهد:

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

  تمام حاشیه ها در بالای پس زمینه جعبه کشیده شده اند. رنگ حاشیه‌های ترسیم شده برای مقادیر «شیار»، «رج»، «inset» و «outset» به ویژگی‌های رنگ حاشیه عنصر بستگی دارد، اما UAs ممکن است الگوریتم خود را برای محاسبه رنگ‌های واقعی استفاده شده انتخاب کنند. برای مثال، اگر «رنگ حاشیه» مقدار «نقره‌ای» را داشته باشد، یک UA می‌تواند از گرادیان رنگ‌ها از سفید تا خاکستری تیره برای نشان دادن مرز شیبدار استفاده کند.

  ویژگی 'border-style' سبک چهار حاشیه را تعیین می کند. می‌تواند از یک تا چهار مقدار مؤلفه داشته باشد، و مقادیر در طرف‌های مختلف مانند «عرض حاشیه» در بالا تنظیم می‌شوند.

  در مثال بالا، مرزهای افقی "یکپارچه" و مرزهای عمودی "نقطه دار" خواهند بود.

  از آنجایی که مقدار اولیه سبک های حاشیه "هیچ" است، هیچ حاشیه ای قابل مشاهده نخواهد بود مگر اینکه سبک حاشیه تنظیم شده باشد.

  8. 5. 4 ویژگی‌های کوتاه‌نویسی حاشیه: «حاشیه-بالا»، «مرز-راست»، «مرز-پایین»، «مرز-چپ» و «مرز»

  این یک ویژگی مختصر برای تنظیم عرض، سبک و رنگ حاشیه بالا، راست، پایین و چپ یک کادر است.

  قانون فوق عرض، سبک و رنگ حاشیه را در زیر عنصر H1 تنظیم می کند. مقادیر حذف شده به مقادیر اولیه خود تنظیم می شوند. از آنجایی که قانون زیر یک رنگ حاشیه را مشخص نمی کند، حاشیه دارای رنگ مشخص شده توسط ویژگی 'color' خواهد بود:

  ویژگی 'border' یک ویژگی مختصر برای تنظیم عرض، رنگ و سبک یکسان برای هر چهار حاشیه یک کادر است. بر خلاف ویژگی‌های مختصر «margin» و «padding»، ویژگی «border» نمی‌تواند مقادیر متفاوتی را روی چهار مرز تنظیم کند. برای انجام این کار، باید از یک یا چند ویژگی حاشیه دیگر استفاده شود.

  به عنوان مثال، اولین قانون زیر معادل مجموعه چهار قانون نشان داده شده پس از آن است:

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

  این مثال را در نظر بگیرید:

  در مثال بالا، رنگ حاشیه سمت چپ سیاه است، در حالی که حاشیه های دیگر قرمز هستند. این به دلیل تنظیم عرض، سبک و رنگ «حاشیه چپ» است. از آنجایی که مقدار رنگ توسط ویژگی 'border-left' داده نمی شود، از ویژگی 'color' گرفته می شود. این واقعیت که ویژگی 'color' بعد از ویژگی 'border-left' تنظیم شده است، مرتبط نیست.

  8. 6 مدل جعبه برای عناصر درون خطی در زمینه دو جهته

  برای هر جعبه خط، UAها باید جعبه‌های درون خطی تولید شده برای هر عنصر را بگیرند و حاشیه‌ها، حاشیه‌ها و لایه‌ها را به ترتیب بصری (نه ترتیب منطقی) ارائه دهند.

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

  هنگامی که ویژگی "جهت" عنصر "RTL" است ، جعبه سمت راست از جعبه خط اول که در آن عنصر ظاهر می شود دارای بالشتک سمت راست ، مرز راست و حاشیه راست و جعبه چپ ترین خط خط آخر استجعبه ای که در آن عنصر ظاهر می شود حاشیه سمت چپ ، مرز چپ و بالشتک سمت چپ است.< SPAN> هنگامی که ویژگی "جهت" عنصر "LTR" است ، جعبه سمت چپ از جعبه خط اول که در آن عنصر ظاهر می شود دارای حاشیه سمت چپ ، مرز چپ و بالشتک سمت چپ و سمت راست جعبه تولید شده استآخرین جعبه خط که در آن عنصر ظاهر می شود دارای بالشتک مناسب ، مرز راست و حاشیه راست است.