منبع: حاشیه یا بالشتک؟
فیلیپ اسپورر.
ترجمه: vl49.

چه زمانی بهتر است از حاشیه و چه زمانی از padding برای مقاصد قالب بندی استفاده کنیم و آیا این مهم است؟

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

برای وضوح، بیایید به یک وضعیت معمولی بپردازیم، که به احتمال زیاد برای هر توسعه دهنده ای شناخته شده است. رابط کاربریدر سال 2017 ما ساده ترین قالب کارت را داریم.

AT این مثالدو نوع فاصله وجود دارد:

بین کارت ها (آبی)؛

بین کارت ها و ظرف آنها (سبز)؛

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

پیاده سازی یک مثال با CSS؟

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

ظرف(
بالشتک: 16 پیکسل
}
.card + .card(
حاشیه: 0 0 0 8 پیکسل;
}

فقط 2 انتخابگر و 2 قانون.

کارکرد علامت مثبت چیست؟

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

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

این به این معنی است که ما توانایی اضافه کردن هر تعداد کارت را داریم که فاصله بین آنها همیشه هشت پیکسل خواهد بود.

همه چیز خوب کار می کند تا زمانی که لازم باشد چیزی غیر از کارت را در کنار کارت ها قرار دهیم. خوب، بیایید بگوییم یک دکمه "افزودن کارت" ("افزودن کارت"):

بر اساس قطعه CSS که قبلاً داریم، احتمالاً به عنصر جدیدی که نشان دهنده دکمه است کلاس .card نمی دهیم، زیرا این یک کارت نیست. چگونه بودن؟ آیا ارزش آن را دارد که یک نام کلاس اضافی .add-card ایجاد کنیم که حاوی همان قانون با ویژگی margin مانند کلاس .card باشد؟ نه راه حل بهتری هست

جغد لوبوتومی شده *+* .

و چه شکلی است. با وجود تداعی خنده دار، این روش عالی کار می کند و از زمانی که متوجه شدم همیشه از آن استفاده می کنم. خب، این همه برای چیست؟ در اینجا نگاهی به کد CSS مربوطه می اندازیم:

ظرف(
بالشتک: 16 پیکسل
}
/* خوب، جغد لوبوتومی شده را شناختی؟ */
کانتینر > * + * (
حاشیه: 0 0 0 8 پیکسل;
}

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

در نهایت.

من صمیمانه امیدوارم که مطالب ارائه شده در اینجا به شما کمک کرده باشد که بفهمید چه زمانی از padding برای جدا کردن محتوای موجود در ظرف استفاده کنید و چه زمانی از حاشیه استفاده کنید.

به عنوان یک نتیجه، من می خواهم یک پروژه قلم را برای بررسی شما ارائه کنم که نمونه های بالا را نشان می دهد، و همچنین دو قانون که توسط تجربه خودم تأیید شده است. بنابراین، ما استفاده می کنیم:

لایه گذاری- برای فضاهای بین ظرف و محتوای آن.

لبه- برای شکاف بین عناصر داخل ظرف.

بازدید پست: 427

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

قبل از آن، ما موفق به مطالعه ویژگی های نسبتا ساده ای شدیم که فونت های ()، متن () را کنترل می کردند و مدل را بررسی کردیم

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

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

مدل جعبه CSS - بالشتک، حاشیه و حاشیه

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

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

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

آن ها شمارش از بالا (بالا) شروع می شود و ادامه می یابد در جهت عقربه های ساعتتا انتهای دایره با تورفتگی سمت راست (راست). ممکن است چیزی شبیه این به نظر برسد:

حاشیه: 20px 10px 40px 30px;

و این بدان معنی است که مرورگر باید 20 پیکسل بالای بلوک ما، 10 پیکسل به سمت راست، 40 پیکسل در پایین و 30 پیکسل به سمت چپ فرو رود. این ورودی معادل با:

کوتاه کردن کد CSS با چشم غیر مسلح قابل مشاهده است. اما این حد نیست. استفاده از نه تنها چهار، بلکه سه، دو و حتی فقط یک مقدار در یک قانون پیش ساخته کاملاً قابل قبول است. که بیشتر به کاهش حجم کد کمک می کند. با این حال، کاهش تعداد مقادیر فقط در موارد خاص امکان پذیر خواهد بود:

1. اگر حاشیه چپ و راست یکسان است، برای مثال: margin:20px 30px 40px 30px;

   آخرین مورد را می توان حذف کرد:

   حاشیه: 20px 30px 40px;

   این دو مدخل قوانین مجموعه یک کار را انجام می دهند. بنابراین، اگر یک ورودی با سه مقدار در Margin مشاهده کردید، مقدار چهارم (در سمت راست) در دومی (در سمت چپ) قابل مشاهده است.

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

2. اگر علاوه بر برابری حاشیه‌ها در سمت چپ و راست، برابری مقادیر آنها در بالا و پایین وجود داشته باشد: حاشیه: 20px 30px 20px 30px.

   یا، که یکسان است (به موجب بند 1):

   حاشیه: 20px 30px 20px;

   اینکه چنین قانون پیش ساخته ای را می توان تنها با دو مقدار نوشت و آخرین موردی که با اولی مطابقت دارد کنار گذاشته شد:

   حاشیه: 20px 30px; در این مورد، مقدار اول حاشیه های عمودی را توصیف می کند و دومی حاشیه های افقی را توصیف می کند.

3. و در نهایت، اگر همه مقادیر در قانون پیش ساخته یکسان باشند: حاشیه: 20 پیکسل 20 پیکسل 20 پیکسل 20 پیکسل.

   یا، که همان است (به موجب بند 2):

   حاشیه: 20px 20px;

   که قابل استفاده است کوتاه ترین نوع رکورد(با حذف آخرین مقداری که با مقدار اول مطابقت دارد):

   حاشیه: 20 پیکسل همان تورفتگی بیرونی در همه طرف عنصر Html ما به چه معناست.

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

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

به عنوان مثال، اگر بلوک بالا روی:

حاشیه: 20px 20px 200px 20px;

و برای پایین:

حاشیه: 100px 20px 20px 20px;

سپس حاشیه پایین بلوک بالایی (200 پیکسل) حاشیه بالایی بلوک پایینی را جذب می کند (100 پیکسل و حتی اگر برابر با 199 پیکسل شود چیزی تغییر نمی کند) و تورفتگی بیرونی حاصل بین این دو بلوک همچنان 200 پیکسل خواهد بود. آن ها فقط بزرگتر در نظر گرفته شده است.مدول Margin، و به هیچ وجه با مقدار مخالف عنصر همسایه عمودی جمع نمی شود.

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

به عنوان مثال، در این مورد:

حاشیه بالا:20px 20px -20px 20px; حاشیه پایین: 10px 20px 20px 20px;

بالشتک حاصل بین بلوک ها -10px خواهد بود، یعنی. 10 پیکسل پایین روی عنصر Html بالا اجرا می شود.

یکی دیگر از ویژگی های استفاده از قانون Margin در CSS این است که مقدار مشخص شده است عمودی برای عناصر درون خطی نادیده گرفته می شود. با پرسیدن:

حاشیه: 20 پیکسل

به عنوان مثال، برای، که یک عنصر درون خطی است، ما در واقع فقط لایه افقی را خواهیم دید و هیچ تغییر عمودی رخ نخواهد داد.

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

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

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

بالشتک و حاشیه - بالشتک و حاشیه

بیایید اکنون به تنظیم padding با استفاده از قانون Padding برویم و ببینیم چه مقادیری می تواند داشته باشد:

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

درصدها در آن به همان روشی که در Margin محاسبه می شود - نسبت به عرض ظرف (منطقه محتوای عنصر اصلی) که عنصر ما در آن محصور شده است. قانون padding پیش ساخته در Cssشکل گرفته و از همان قوانینی که در بالا بحث شد پیروی می کند:

پد: 20px 10px 40px 30px;

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

و آخرین چیزی که امروز می خواهم در نظر بگیرم چارچوبی است که با استفاده از آن تنظیم شده است مرز. آنها سه نوع پارامتر دارند:

1. Border-width - عرض حاشیه را تنظیم می کند
2. رنگ حاشیه - رنگ آن را تنظیم می کند
3. Border-style - نوع قاب یا نوع خطی که با آن ترسیم می شود

هر سه این قوانین CSS دارای مجموعه ای معتبر از مقادیر هستند:

عرض خط برای حاشیه ( عرض مرز) را می توان هم با کمک اعداد در Em، Ex یا Px و با کلمات مشخص کرد:

1. نازک - خط نازک؛
2. متوسط ​​- متوسط ​​(این مقدار به طور پیش فرض استفاده می شود).
3. ضخیم - ضخیم.

border-width: 2px;

به عنوان یک مقدار برای رنگ حاشیه ( رنگ لبه) می توانید از روش های پذیرفته شده برای تعیین آنها (کد هگزادسیمال، کلمات و غیره) استفاده کنید:

حاشیه-رنگ:قرمز;

به‌طور پیش‌فرض، اگر رنگ حاشیه به‌صراحت تنظیم نشده باشد، رنگی که برای فونت داخل عنصر داده شده استفاده می‌شود، استفاده می‌شود.
ویژگی Border-style CSS به شما امکان می دهد نوع حاشیه را در کلمات تنظیم کنید:

1. هیچ - بدون حاشیه (پیش فرض)
2. نقطه چین - خط با نقطه رسم می شود
3. نقطه چین - نقطه چین
4. جامد - خط جامد
5. دو - دو خط
6. شیار - قاب تورفتگی
7. برآمدگی - برآمده
8. درونی و ابتدایی - بازی های سایه

به طور طبیعی، از آنجایی که هر بلوک چهار طرف دارد، می توان از آن به عنوان استفاده کرد قوانین عمومیو برای هر یک از طرفین جداگانه:

همین امر در مورد مرز قانون پیش ساخته- می توان آن را هم برای همه طرف ها به طور همزمان نوشت (Border) و هم برای هر یک از اضلاع به طور جداگانه (Border-بالا، چپ، پایین و راست). ترتیب مقادیر مهم نیست:

حاشیه: 1px قرمز جامد.

اگر چیزی حذف شود، به جای آن از مقدار پیش فرض استفاده می شود.

موفق باشی! به زودی شما را در سایت صفحات وبلاگ می بینیم

ممکن است علاقه مند باشید

ارتفاع، عرض و سرریز - قوانین CSS برای توصیف منطقه محتوا در طرح بندی بلوک
موقعیت (مطلق، نسبی و ثابت) - راه هایی برای قرار دادن عناصر Html در CSS (قوانین چپ، راست، بالا و پایین) طراحی متفاوت برای داخلی و لینک های خارجیاز طریق CSS
شناور و پاک کردن در CSS - ابزارهای طرح بندی بلوک
نمایش (بلاک، هیچ، درون خطی) در CSS - تنظیم نوع نمایش عناصر Html در یک صفحه وب
سبک لیست (نوع، تصویر، موقعیت) - قوانین Css برای سفارشی کردن ظاهرلیست ها در کد html
پس زمینه در CSS (رنگ، ​​موقعیت، تصویر، تکرار، پیوست) - همه برای تنظیم رنگ پس زمینه یا تصویر پس زمینهعناصر HTML
CSS برای چیست، چگونه استایل شیت های آبشاری را به آن متصل کنیم سند htmlو نحو اصلی این زبان نحوه تغییر رنگ پس‌زمینه ردیف‌های جداول، لیست‌ها و سایر عناصر Html در سایت با استفاده از کلاس شبه nth-child
قوانین فونت (وزن، خانواده، اندازه، سبک) و ارتفاع خط برای استایل دادن به فونت ها در CSS

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

یک وظیفه: در صفحه نیاز به بلوک قرمز(200x200 پیکسل)، که از لبه های مرورگر دور می شودبالا و سمت چپ به ترتیب با 40 و 70 پیکسل و متنی که داخل آن از سمت چپ و بالا تورفتگی دارددر 40 پیکسل

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

علاوه بر ویژگی های استفاده شده (خطوط 6-9)، ویژگی های margin-right، padding-right، margin-bottom، padding-bottom نیز وجود دارد - آنها به ترتیب برای تورفتگی های سمت راست و پایین هستند. مقادیر همه این ویژگی ها می تواند بر حسب پیکسل (px)، درصد (%) یا واحد em باشد.

اساساً همین است. با این حال، برخی از ویژگی های دیگر کار با آنها وجود دارد.

ویژگی های حاشیه و بالشتک

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

اگر حاشیه-چپ و حاشیه-راست را با مقادیر خودکار برای برخی از بلوک ها تنظیم کنید، سپس اگر بلوک دارای عرض ثابت (مثلا 400 پیکسل) باشد و خاصیت float CSS وجود نداشته باشد، این بلوک در مرکز آن تراز می شود. عنصری که در آن قرار دارد. در واقع برای چیدمان غیر لاستیکی با تراز مرکزی، معمولاً از این روش تراز استفاده می شود. حتی اگر IE 5.5 و نسخه های قبلی از مقدار خودکار پشتیبانی نمی کند، باز هم شما را از استفاده همیشه از آن باز نمی دارد.

استفاده از padding و margin در جداول توصیه نمی شود زیرا افکت در مرورگرهای مختلف غیر قابل پیش بینی خواهد بود.

و آخرین چیزی که می خواستم بگویم. فراموش نکنید که از ساختارهای پست کوتاه مانند margin: 10px 0 5px 20px استفاده کنید. اگر تورفتگی صفر باشد، می توانید به سادگی یک صفر را بدون مشخص کردن پارامترها قرار دهید. یادآوری اینکه کدام یک از پارامترها به کدام مرز تعلق دارد بسیار آسان است - برای بلوک، تورفتگی ها در جهت عقربه های ساعت حرکت می کنند: شماره اول در بالا، دومی در سمت راست، سومی در پایین، چهارمی در سمت راست است. ترک کرد.

این در واقع تمام چیزی است که امروز می خواستم به شما بگویم. آخر هفته همه مبارک!

این ویژگی می تواند یک تا چهار مقدار داشته باشد.

در تصویر، رنگ خاکستری روشن ناحیه ای را که خاصیت padding مسئول آن است را نشان می دهد:

1. زمانی که شما مشخص می کنید چهار مقدار(5px 10px 15px 20px ) - ترتیب padding به صورت زیر خواهد بود: بالا(5 پیکسل) - درست(10px) - پایین(15 پیکسل) - ترک کرد(20 پیکسل). برای به خاطر سپردن ترتیب تورفتگی در یک اعلان، می توانید از کلمه انگلیسی استفاده کنید TRشما BL e(کجا تی-بالا، آر-درست، ب- پایین، L- ترک کرد).


2. زمانی که شما مشخص می کنید سه معنی(5px 10px 15px ) - ترتیب padding به صورت زیر خواهد بود: بالا(5 پیکسل) - راست چپ(10px) - پایین(15 پیکسل).


3. زمانی که شما مشخص می کنید دو مقدار(5px 10px) - مقدار اول (5px) اندازه بالشتک را از بالا و پایین محتوای عنصر تنظیم می کند، مقدار دوم (10px) بالشتک را در سمت چپ و راست محتوای عنصر تنظیم می کند.


4. زمانی که شما مشخص می کنید یک ارزش(5px) - بالشتک از همه طرف یکسان خواهد بود - 5px.

پشتیبانی مرورگر

ویژگی			اپرا		IExplorer	حاشیه، غیرمتمرکز
لایه گذاری	1.0	1.0	3.5	1.0	4.0	12.0

نحو CSS:

padding: "طول | اولیه | ارث بردن" ;

نحو جاوا اسکریپت:

object.style.padding = "5px"

ارزش های دارایی

نسخه CSS

CSS1

به ارث برده

خیر

متحرک

آره.

مثال استفاده

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

لایه گذاری

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 پیکسل */
}

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