تفاوت حاشیه بالشتک Css. حاشیه یا بالشتک؟ فکر کردن در مورد چه چیزی و کجا استفاده کنید

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

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

بله، ما همچنین موفق شدیم اصول استفاده را در تمام جزئیات در نظر بگیریم (در چندین مقاله گنجانده شده است). اکنون زمان آن است که به سراغ قوانینی برویم که اساس ساخت اسناد (صفحات وب) را تشکیل می دهند و با مدل بلوک (رابطه عناصر 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. و در نهایت، اگر همه مقادیر در قانون پیش ساخته یکسان باشند: margin:20px 20px 20px 20px;

   یا، که یکسان است (به موجب بند 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-style CSS به شما امکان می دهد نوع حاشیه را در کلمات تنظیم کنید:

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

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

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

حاشیه: 1 پیکسل قرمز جامد.

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

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

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

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

ویژگی padding CSS وظیفه تنظیم padding در داخل عنصر از مرز آن است.

بالشتک نحوی CSS

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

• بالا - تورفتگی از مرز بالایی عنصر؛
• راست - تورفتگی از مرز سمت راست عنصر؛
• پایین - تورفتگی از مرز پایین عنصر؛
• سمت چپ - تورفتگی از مرز سمت چپ عنصر؛

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

یادداشت 1
بیش از چهار مقدار مجاز است. بسته به تعداد مقادیر، اقدامات متفاوت خواهد بود:

• اگر 3 مقدار داده شود، اولین مقدار تورفتگی را از بالا تنظیم می کند، دوم - هر دو سمت چپ و راست، و سوم - پایین.
• اگر 2 مقدار داده شود، مقدار اول تورفتگی را از بالا و پایین تنظیم می کند، دومی - سمت چپ و راست محتوا.
• اگر مقدار 1 تنظیم شود، آنگاه تورفتگی برای همه اضلاع روی همان فرورفتگی تنظیم می شود. برای مثال:

بالشتک : 10px 10px 10px 10px ; می توانید آن را فشرده تر تنظیم کنید:بالشتک: 10 پیکسل

تبصره 2
برخلاف ویژگی حاشیه CSS، مقادیر padding منفی مجاز نیستند.

همچنین padding دارای 4 ویژگی CSS جداگانه است. هر یک از آنها مسئول جهت گیری هستند.

• padding-left - padding از مرز سمت چپ عنصر؛
• padding-right - padding از مرز سمت راست عنصر؛
• padding-top - padding از مرز بالایی عنصر؛
• padding-bottom - padding از مرز سمت چپ عنصر؛

برای مثال

padding : 3px 5px 7px 10px ; یا می توانید با جزئیات مشخص کنید: padding-left : 10px ; padding-right : 5px ; padding-top : 3px ; padding-bottom : 7px ;

مثال هایی با تورفتگی های مختلف در یک عنصر

مثال 1: تورفتگی متن در یک برچسب

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Вот как это выглядит на странице:

Пример с нулевыми отступам (padding: 0px)

Пример с одинаковым отступом от всех границ (padding: 10px)

Пример с разными отступам (padding: 10px 0px 0px 30px)

Пример 2. Отступ объекта внутри объекта

Описание

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Свойство padding позволяет задать величину поля сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

padding: [значение | проценты] {1, 4} | inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Величину полей можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение inherit указывает, что оно наследуется у родителя. При указании поля в процентах, значение считается от ширины родителя элемента.

HTML5 CSS2.1 IE Cr Op Sa Fx

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

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

مدل شی

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

مرورگرها

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

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

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

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


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


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


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

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

نحو CSS:

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

object.style.padding = "5px"

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

نسخه CSS

به ارث برده

متحرک

مثال استفاده

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

برنج. 1. حاشیه سمت چپ متن

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

اطلاعات مختصر

نحو

لایه گذاری: [<размер> | <проценты>] {1, 4}