ارزش بالشتکی نسبی نحوه تنظیم حاشیه CSS و padding (و نکات جالب چیدمان). چیز هایی برای به یاد آوردن

از نویسنده:وقتی برای اولین بار شروع به یادگیری CSS کردم، همیشه در مورد حاشیه ها و padding ها گیج می شدم. آنها بسیار شبیه به نظر می رسیدند و در برخی موارد نتیجه یکسانی داشتند. در این آموزش، تفاوت بین حاشیه‌های CSS و padding‌ها و اینکه چگونه این ویژگی‌ها بر فضای بین عناصر در یک صفحه تأثیر می‌گذارند را خواهید دید. ما همچنین در مورد حاشیه های فروپاشی با استفاده از واحدهای اندازه گیری مختلف در هنگام ساخت سایت های واکنش گرا بحث خواهیم کرد. ما مقاله را با چند نکته چیدمان با استفاده از حاشیه و padding به پایان خواهیم رساند.

مدل بلوک

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

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

همانطور که از نمودار می بینید، padding لایه ای است که یک عنصر را از لبه بیرونی ناحیه محتوا تا لبه داخلی قاب گسترش می دهد. این ویژگی فاصله بین مرز یک عنصر و محتوای آن را کنترل می کند. padding بر اندازه یک عنصر در یک صفحه تأثیر می گذارد، اما بر فاصله بین عناصر در یک صفحه تأثیر نمی گذارد.

اگر نیاز به افزایش یا کاهش فاصله بین عناصر دارید، از حاشیه استفاده کنید. ویژگی margin به هیچ وجه بر اندازه عنصر تأثیر نمی گذارد.

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

با توجه به مدل جعبه W3C، عرض یک عنصر از محتوای جعبه بدون توجه به بالشتک و حاشیه محاسبه می شود. بالشتک و حاشیه در بالا اضافه شده است ابعاد داده شده، که می تواند منجر به عواقب غیرقابل پیش بینی برای صفحه آرایی شود.

به عنوان مثال، اجازه دهید یک بلوک با عرض 200 پیکسل و ارتفاع 200 پیکسل، بالشتک 10 پیکسل در هر طرف، و یک حاشیه 2 پیکسل در هر طرف را در نظر بگیرید. مرورگر بلوک 200 پیکسلی را نمی بیند. مرورگر فضای افقی مورد نیاز برای نمایش بلوک را محاسبه می کند و 224 پیکسل است: 200 (عرض) + 2 (حاشیه سمت چپ) + 10 (بالشتک سمت چپ) + 10 (بالشتک سمت راست) + 2 (حاشیه سمت راست) = 224 پیکسل. از آنجایی که مربع است، ارتفاع آن نیز 224 پیکسل خواهد بود.

از سوی دیگر، مدل جعبه سنتی مجموع محتوا، لایه‌ها و حاشیه را به عنوان عرض در نظر می‌گیرد. این به این معنی است که اگر بلوک شما 200 پیکسل باشد، مرورگر فضای افقی مورد نیاز برای نمایش آن را محاسبه می کند و 200 پیکسل، شامل padding و حاشیه خواهد بود. نتیجه قابل پیش بینی تر است و کار با آن آسان تر است.

به طور پیش فرض، همه مرورگرها از مدل جعبه W3C استفاده می کنند. مدل را می توان به صورت دستی با استفاده از ویژگی box-sizing تنظیم کرد. دو مقدار پذیرفته شده عبارتند از content-box (W3C) و border-box (سنتی). مدل سنتی شهودی تر است، که آن را در بین توسعه دهندگان وب محبوب ترین کرده است.

موارد زیر نحوه استفاده از مدل سنتی را در پروژه خود با استفاده از اندازه جعبه نشان می دهد:

html ( اندازه جعبه: حاشیه-باکس؛ ) *، *: قبل، *: بعد (اندازه جعبه: ارث بری؛ )

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

تنظیم حاشیه و بالشتک

ویژگی‌های padding-top، padding-right، padding-bottom و padding-left، padding را در هر چهار طرف یک عنصر کنترل می‌کنند. همچنین می توانید padding را از طریق یک ویژگی مختصر تنظیم کنید. اگر یک مقدار padding نوشته شده باشد، CSS از آن برای تعیین padding برای هر 4 طرف استفاده می کند:

/* هر 4 طرف */ padding: 10px;

اگر 3 مقدار وجود دارد، اولی برای بالا، دومی برای چپ و راست و سومی برای پایین است:

/* بالا | افقی | پایین */ padding: 1em 20px 2em;

اگر هر 4 مقدار وجود داشته باشد، هر کدام به ترتیب مسئول بالا، راست، پایین و چپ هستند:

/* بالا | راست | پایین | سمت چپ */ padding: 10px 10% 2em 15%;

در دمو زیر، پس‌زمینه نارنجی، ناحیه محتوا برای عناصر مختلف است، ناحیه سفید بین حاشیه و محتوا، بالشتک است:

با ویژگی‌های margin-top، margin-right، margin-bottom و margin-left می‌توان padding را از 4 طرف کنترل کرد، درست مانند padding. همچنین با استفاده از خاصیت کوتاه‌نویسی می‌توان حاشیه را برای هر 4 طرف به طور همزمان تنظیم کرد.

/* هر 4 طرف */ حاشیه: 10 پیکسل. /* عمودی | افقی */ حاشیه: 2em 4em; /* بالا | افقی | پایین */ حاشیه: 2em خودکار 2em; /* بالا | راست | پایین | سمت چپ */ حاشیه: 10px 10% 2em 15%;

چیز هایی برای به یاد آوردن

از واحدهای اندازه گیری صحیح استفاده کنید

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

فرض کنید عرض یک عنصر را 50 درصد و حاشیه آن را 15 پیکسل تعیین کرده اید. در عرض 1200 پیکسل، عرض عنصر 600 پیکسل و حاشیه همچنان 15 پیکسل خواهد بود. در عرض 769 پیکسل، عرض عنصر 384 پیکسل و حاشیه همچنان 15 پیکسل خواهد بود.

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

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

مرورگرها چگونه حاشیه و padding را برای واحدهای مختلف محاسبه می‌کنند

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

حاشیه و بالشتک، به صورت درصد، نسبت به عرض ظرف محاسبه می شود. بنابراین اگر ظرف 100 پیکسل عرض داشته باشد، بالشتک 5 درصد، 5 پیکسل خواهد بود یا اگر عرض ظرف 1000 پیکسل باشد، 50 پیکسل خواهد بود. فراموش نکنید که مقادیر بالا و پایین نیز با عرض ظرف محاسبه می شود.

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

همچنین 4 واحد دید vw، vh، vmin و vmax وجود دارد. در این مورد، مقادیر حاشیه و padding به viewport بستگی دارد. به عنوان مثال، padding 5vw در نمای 500px 25px خواهد بود و padding 10vw در همان viewport 50px خواهد بود. می توانید در مقاله SitePoint "CSS Viewport Units of Measure: Quick Start" درباره این واحدهای اندازه گیری اطلاعات بیشتری کسب کنید.

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

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

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

فرض کنید دو عنصر یکی زیر دیگری دارید، یعنی. در همان سطح اگر margin-bottom را روی عنصر اول 40 پیکسل و در عنصر دوم 25 پیکسل قرار دهید، مجموع حاشیه بین عناصر برابر با 65 پیکسل نخواهد بود. تورفتگی برابر با مقدار حاشیه بزرگتر خواهد بود، یعنی. 40 پیکسل

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

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

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

روش های جالب استفاده از حاشیه و padding

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

حفظ نسبت تصویر در تصاویر

اغلب تصاویر روی صفحه دارای نسبت های متفاوتی هستند. اگر نیاز دارید همه تصاویر را با نسبت تصویر یکسان نشان دهید، CSS padding به شما کمک می کند.

برای این کار باید ارتفاع والد را صفر کنید و ویژگی padding-top والد باید برابر با مقدار نسبت تصویر باشد که به صورت درصد بیان می شود.

برای مثال، نسبت تصویر 16:9 با padding به دست می آید: 56.25% 0 0 0. مقدار 56.25 با (9/16)*100 به دست می آید. با این روش می توانید درصدهای padding را برای هر نسبت ابعاد دیگری محاسبه کنید.

نتیجه

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

شرح

مقدار حاشیه های اطراف محتوای عنصر را تنظیم می کند. حاشیه فاصله از لبه داخلی قاب یک عنصر تا یک مستطیل خیالی است که محتوای آن را محدود می کند (شکل 1).

ویژگی padding به شما این امکان را می دهد که مقدار padding را برای همه طرف های عنصر به طور همزمان تنظیم کنید یا آن را فقط برای طرف های مشخص شده تعریف کنید.

نحو

padding: [value | درصد] (1، 4) | به ارث می برند

ارزش های

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

حاشیه ها را می توان بر حسب پیکسل (px)، درصد (%) یا سایر واحدهای مناسب CSS مشخص کرد. مقدار inherit نشان می دهد که از والد به ارث رسیده است. هنگام تعیین یک حاشیه به عنوان درصد، مقدار از عرض والد عنصر محاسبه می شود.

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثالدر شکل نشان داده شده است. 2.

برنج. 2. اعمال خاصیت padding

مدل شی

document.getElementById("elementID").style.padding

مرورگرها

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.

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

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

padding محتوا را از حاشیه بلوک جدا می کند، در حالی که حاشیه بین بلوک ها شکاف ایجاد می کند

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

برای تنظیم حاشیه یا padding در CSS از هر طرف یک عنصر، ویژگی های زیر وجود دارد:

تورفتگی ها:

• رویه بالشتک: معنی؛
• padding-right: معنی؛
• padding-bottom: معنی؛
• padding-left: معنی؛

زمینه های:

• حاشیه بالا: معنی؛
• حاشیه-راست: معنی؛
• حاشیه-پایین: معنی؛
• حاشیه چپ: معنی؛

مقادیر را می توان در هر واحد CSS مشخص کرد - px، em،٪ و غیره. مثال: margin-top: 15px.

همچنین یک چیز بسیار مفید مانند وجود دارد خلاصه CSS برای حاشیه و padding. اگر نیاز به تنظیم حاشیه یا padding برای هر چهار طرف یک عنصر دارید، لازم نیست برای هر ضلع به طور جداگانه یک ویژگی بنویسید. همه چیز ساده تر شده است: برای حاشیه و padding، می توانید 1، 2، 3 یا 4 مقدار را به طور همزمان مشخص کنید. نحوه توزیع تنظیمات به تعداد مقادیر بستگی دارد:

• 4 مقدار: padding برای همه طرف های عنصر به ترتیب زیر تنظیم می شود: بالا، راست، پایین، چپ: padding: 2px 4px 5px 10px;
• 3 مقدار: padding ابتدا برای سمت بالا، سپس برای هر دو سمت چپ و راست، و سپس برای پایین تنظیم شده است: padding: 3px 6px 9px.
• 2 مقدار: padding ابتدا از دو طرف بالا و پایین به طور همزمان تنظیم می شود و سپس - به طور همزمان برای سمت چپ و راست: padding: 6px 12px.
• 1 مقدار: یک padding را برای همه طرف های عنصر تنظیم کنید: padding: 3px;

قوانین مشابهی برای ویژگی حاشیه CSS اعمال می شود. توجه داشته باشید که می توانید از مقادیر منفی نیز برای حاشیه استفاده کنید (به عنوان مثال -3px)، که گاهی اوقات می تواند بسیار مفید باشد.

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

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

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

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

• وقتی هر دو مقدار حاشیه مثبت باشند، اندازه حاشیه نهایی مقدار بزرگتر خواهد بود.
• اگر یکی از مقادیر منفی باشد، برای محاسبه اندازه فیلد باید مجموع مقادیر به دست آید. به عنوان مثال، با مقادیر 20px و -18px، اندازه فیلد به صورت زیر خواهد بود:
  20 + (-18) = 20 - 18 = 2 پیکسل.
• اگر هر دو مقدار منفی باشند، مدول این اعداد مقایسه شده و عدد با مدول بزرگتر انتخاب می شود (از این رو اعداد منفی کوچکتر). مثال: می خواهید مقادیر فیلدهای -6px و -8px را با هم مقایسه کنید. ماژول های اعداد مقایسه شده به ترتیب 6 و 8 هستند. نتیجه این است که 6 - 8 . اندازه فیلد نهایی 8- پیکسل است.
• در صورتی که مقادیر در واحدهای CSS مختلف مشخص شده باشند، به یک کاهش می یابند و پس از آن مقایسه می شوند و مقدار بزرگتر انتخاب می شود.
• اندازه حاشیه برای عناصر فرزند حتی جالب تر است: اگر فرزند حاشیه بزرگتر از والد داشته باشد، اولویت به آن داده می شود. در این صورت اندازه‌های حاشیه‌های بالا و پایین والدین همان اندازه‌ای می‌شود که برای کودک تنظیم شده است. در این صورت فاصله ای بین والدین و فرزند وجود نخواهد داشت.

شرح

مقدار حاشیه های اطراف محتوای عنصر را تنظیم می کند. حاشیه فاصله از لبه داخلی قاب یک عنصر تا یک مستطیل خیالی است که محتوای آن را محدود می کند (شکل 1).

ویژگی padding به شما این امکان را می دهد که مقدار padding را برای همه طرف های عنصر به طور همزمان تنظیم کنید یا آن را فقط برای طرف های مشخص شده تعریف کنید.

نحو

padding: [value | درصد] (1، 4) | به ارث می برند

ارزش های

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

حاشیه ها را می توان بر حسب پیکسل (px)، درصد (%) یا سایر واحدهای مناسب CSS مشخص کرد. مقدار inherit نشان می دهد که از والد به ارث رسیده است. هنگام تعیین یک حاشیه به عنوان درصد، مقدار از عرض والد عنصر محاسبه می شود.

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثال در شکل نشان داده شده است. 2.

برنج. 2. اعمال خاصیت padding

مدل شی

document.getElementById("elementID").style.padding

مرورگرها

اینترنت اکسپلورر تا نسخه 7.0 از مقدار ارثی پشتیبانی نمی کند.

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

لایه گذاری

Padding خاصیتی است که مقدار padding یک عنصر را از لبه داخلی حاشیه تا محتوا تعیین می کند. محتوا می تواند متن ساده، تصویر یا عنصر فرزند باشد که می تواند حاشیه های خاص خود را نیز داشته باشد.

واحدها می توانند پیکسل (px) یا درصد (%) باشند.

#مسدود کردن(
بالشتک: 12 پیکسل /* از مرزهای بلوک به محتوا اضافه می شود - 12 پیکسل در هر طرف وجود خواهد داشت */
}

تعیین یک فیلد فقط در یک طرف خاص امکان پذیر است:

رویه لایی- خاصیتی که در بالا حاشیه ایجاد می کند.
روکش کردن سمت راست- خاصیتی که فیلدهایی را در سمت راست ایجاد می کند.
بالشتک پایین- خاصیتی که حاشیه های پایینی ایجاد می کند.
padding-left- خاصیتی که در سمت چپ حاشیه ایجاد می کند.

#مسدود کردن(
padding-bottom: 25px /* حاشیه پایین 25 پیکسل */
padding-left: 15px; /* حاشیه چپ 15 پیکسل */
}

همانطور که متوجه شدید، اگر فیلدهایی را از 2 یا 3 طرف به این ترتیب مشخص کنید، یک کد طولانی دریافت خواهید کرد. یک نماد مختصر برای ویژگی padding برای این وجود دارد. هر 4 مقدار به نوبه خود در آن نشان داده شده است - از هر لبه در یک خط، حرکت در جهت عقربه های ساعت می رود و از بالا شروع می شود:

بالشتک: بالا بالشتک راست بالشتک پایین پد چپ.

#مسدود کردن(
بالشتک: 25px 10px 15px 6px; /* بالا 25 پیکسل، راست 10 پیکسل، پایین 15 پیکسل، سمت چپ 6 پیکسل */
}

لبه

ویژگی margin، بر خلاف padding، مقدار padding را بین مرزهای عناصر تعیین می کند.
اگر عنصر فرزند است، پس بالشتک فضایی از مرز عنصر تا لبه داخلی مرز والد است.
اگر عنصر فاقد والد باشد، تورفتگی به عنوان فضای آزاد تعیین شده توسط ویژگی در لبه های مرز عناصر اطراف در نظر گرفته می شود.

#مسدود کردن(
حاشیه: 4 پیکسل
}

برای مشخص کردن تورفتگی‌ها فقط در طرف‌های خاص، ویژگی‌های زیر وجود دارد:

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

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

حاشیه: حاشیه بالا حاشیه سمت راست حاشیه پایین حاشیه سمت چپ;

#مسدود کردن(
حاشیه: 15px 10px 5px 25px; /* بالا 15 پیکسل، راست 10 پیکسل، پایین 5 پیکسل، چپ 25 پیکسل */
}

با تشکر از توجه شما!