خاصیت حاشیه خارجی ترین قسمت مدل جعبه را تعریف می کند و فضای اطراف یک عنصر را خارج از هر مرز تعریف شده ایجاد می کند.
حاشیه با استفاده از طول درصد یا کلمه کلیدی خودکار تنظیم می شوند و می توانند مقادیر منفی داشته باشند. در اینجا یک مثال است:
حاشیه یک ویژگی مختصر نویسی است و حداکثر چهار مقدار را می پذیرد که در اینجا نشان داده شده است:
اگر کمتر از چهار مقدار تنظیم شده باشد مقادیر گمشده بر اساس مقادیر تعریف شده فرض می شوند. به عنوان مثال دو مجموعه قانون زیر نتایج یکسانی خواهند داشت:
بدین ترتیب, اگر تنها یک مقدار تعریف شده است, این مجموعه هر چهار حاشیه به همان مقدار. اگر سه مقدار اعلام می, این حاشیه است: [بالا] [چپ و راست] [پایین]; .
هر یک از حاشیه های منفرد را می توان با استفاده از دست بلند اعلام کرد که در این صورت برای هر ملک فقط یک مقدار تعریف می کنید:
خودکار و مرکز
هر یک از خواص حاشیه همچنین می توانید یک مقدار خودکار را بپذیرید . یک مقدار خودکار اساسا به مرورگر می گوید که حاشیه را برای شما تعریف کند. در بیشتر موارد مقدار خودکار معادل مقدار 0 خواهد بود (که مقدار اولیه برای هر ویژگی حاشیه است) یا هر فضای دیگری در این طرف عنصر موجود است. با این حال, خودکار دستی برای محور افقی است:
در این مثال برای متمرکز کردن افقی این عنصر در فضای موجود دو کار انجام می شود:
- به عنصر عرض مشخص شده داده می شود
- حاشیه های چپ و راست به صورت خودکار تنظیم می شوند
بدون عرض مشخص, ارزش خودکار اساسا هیچ اثر, تنظیم حاشیه چپ و راست به 0 و یا دیگری به هر فضای موجود در داخل عنصر پدر و مادر است.
همچنین لازم به ذکر است که خودکار فقط برای مرکز افقی مفید است و بنابراین استفاده از خودکار برای حاشیه های بالا و پایین عنصری را به صورت عمودی متمرکز نمی کند که می تواند برای مبتدیان گیج کننده باشد.
حاشیه های عمودی روی عناصر مختلف که یکدیگر را لمس می کنند (بنابراین هیچ محتوایی ندارند, بالشتک, یا مرزهایی که از هم جدا می شوند) فرو می ریزند و یک حاشیه واحد تشکیل می دهند که برابر با بیشتر حاشیه های مجاور است. این در حاشیه افقی (چپ و راست) فقط عمودی (بالا و پایین) اتفاق نمی افتد.
برای نشان دادن اچ زیر را:
و سی اس اس زیر:
در این مثال به عنصر ح2 حاشیه پایین 20 پیکسل داده می شود. عنصر پاراگراف که بلافاصله در منبع دنبال می شود دارای حاشیه بالایی است که روی 10 پیکسل تنظیم شده است.
به نظر می رسد عقل سلیم نشان می دهد که ضخامت حاشیه عمودی بین ح2 و پاراگراف در مجموع 30 پیکسل (20 پیکسل + 10 پیکسل) خواهد بود. اما با توجه به فروپاشی حاشیه, ضخامت واقعی به پایان می رسد تا 20 پیکسل. این در قلم تعبیه شده در زیر نشان داده شده است:
اگرچه فروپاشی حاشیه ها ممکن است در نگاه اول غیر شهودی به نظر برسد اما در واقع به چند دلیل مفید هستند. ابتدا از افزودن فضای حاشیه عمودی اضافی که معمولا نامطلوب است جلوگیری می کنند.
دوم اینکه رویکرد سازگارتری برای اعلام حاشیه جهانی در عناصر صفحه فراهم می کنند. مثلا, عنوان معمولا فضای حاشیه عمودی, و بنابراین پاراگراف. اگر حاشیه سقوط نمی, سرفصل که به دنبال پاراگراف (یا بالعکس) اغلب نیاز به بازنشانی حاشیه در یکی از عناصر به منظور دستیابی به یک مقدار ثابت از فاصله عمودی.
سوم, فروپاشی حاشیه نیز به عناصر تو در تو اعمال. به قلم زیر نگاه کنید:
در اینجا عنصر پاراگراف دارای حاشیه بالایی است که در 30 پیکسل تنظیم شده است و در داخل یک عنصر تقسیم با حاشیه بالای 40 پیکسل قرار دارد. علاوه بر این عنصر اچ 2 دارای حاشیه پایین 20 پیکسل است.
باز هم عقل سلیم نشان می دهد که کل فضای حاشیه عمودی در اینجا 90 پیکسل (20 پیکسل + 40 پیکسل + 30 پیکسل) خواهد بود اما در عوض حاشیه ها همه به یک حاشیه 40 پیکسل (بالاترین از سه) فرو می ریزند. این در بیشتر موارد مفید است زیرا برای حذف فضای عمودی اضافی نیازی به تعریف مجدد هر یک از حاشیه های بالا نیست.
همانطور که ممکن است گمان کنید, در حالی که یک مقدار حاشیه مثبت عناصر دیگر را دور می کند, یک حاشیه منفی یا خود عنصر را در این جهت می کشد, یا عناصر دیگر را به سمت خود می کشد.
در اینجا مثالی از یک ظرف با بالشتک وجود دارد و هدر ح2 دارای حاشیه های منفی است که خود را از طریق این بالشتک به لبه ها می کشاند:
در اینجا مثالی وجود دارد که پاراگراف اول دارای حاشیه پایین منفی است که پاراگراف بعدی را به سمت بالا می کشد.
| کروم | سافاری | فایرفاکس | اپرا | IE | اندروید | ایسوس |
|---|---|---|---|---|---|---|
| فعالیت ها | فعالیت ها | فعالیت ها | فعالیت ها | فعالیت ها | فعالیت ها | فعالیت ها |
اینترنت اکسپلورر 6 مستعد اشکال حاشیه شناور مضاعف است که در بیشتر موارد با افزودن صفحه نمایش قابل حل است: درون خطی به عنصر شناور.
پی اس اس! یک حساب دیجیتالی ایجاد کنید و 200 دلار اعتبار رایگان برای میزبانی و خدمات مبتنی بر ابر دریافت کنید.
توضیحات
و چگونه این است- " همچنین باید اشاره کرد که خودکار فقط برای مرکز افقی مفید است و بنابراین استفاده از خودکار برای حاشیه های بالا و پایین عنصری را به صورت افقی متمرکز نمی کند که می تواند برای مبتدیان گیج کننده باشد.", به مبتدیان گیج کننده نیست?
من فکر می کنم روکسون, که به معنای گفتن "عمودی" به جای "افقی"است. در صورت امکان است که می تواند تغییر به طوری که به اشتباه یک طراح جدیدتر. :)
"همچنین باید اشاره کرد که خودکار فقط برای مرکز افقی مفید است و بنابراین استفاده از خودکار برای حاشیه های بالا و پایین یک عنصر را به صورت عمودی متمرکز نمی کند که می تواند برای مبتدیان گیج کننده باشد.”
Since the order of the margin selector values is top > right > bottom >چپ, چرا قرار دادن 0 خودرو را بالا + پایین 0 و چپ + خودکار راست? باید که پایین نگه دارید در هر مقدار پیش فرض (فرض کنید 0 نیست)?
لیویا, فقط با دادن دو مقدار در ارزش برای اولین بار منجر خواهد شد که برای بالا و پایین و ارزش دوم برای چپ و راست استفاده می شود. اگر فقط یک مقدار تنظیم کنید در همه (بالا, پایین, چپ, راست) استفاده می شود. در هر دو مورد ارزش حاشیه که قبل از مجموعه, رونویسی خواهد شد.
