ویژگی padding CSS
- صفحه قبل overscroll-behavior-y
- صفحه بعدی padding-block
تعریف و استفاده
ویژگی padding کوتاهنویسی برای تنظیم تمام پدیدههای داخلکلیه در یک توضیح تنظیم میکند.
توضیح
این توضیح کوتاهنویسی برای تنظیم عرض تمام پدیدههای داخلکلیه عنصر تنظیم میکند، یا برای تنظیم عرض پدیدههای داخلکلیه روی هر سمت تنظیم میکند. پدیدههای داخلکلیه روی عنصر درونریز غیر جایگزین تأثیری بر محاسبه ارتفاع سطر ندارد؛ بنابراین، اگر یک عنصر همزمان دارای پدیدههای داخلکلیه و پسزمینه باشد، ممکن است از دیدگاه بصری به سطرهای دیگر گسترش یابد و ممکن است با محتوای دیگر برخورد کند. پسزمینه عنصر از طریق پدیدههای داخلکلیه گسترش مییابد. مقدار پدیدههای داخلکلیه منفی مجاز نیست.
توضیح:مقدار منفی مجاز نیست.
مثال 1
padding:10px 5px 15px 20px;
- پدیدههای داخلکلیه بالا 10px هستند
- پدیدههای داخلکلیه راست 5px هستند
- پدیدههای داخلکلیه پایین 15px هستند
- پدیدههای داخلکلیه چپ 20px هستند
مثال 2
padding:10px 5px 15px;
- پدیدههای داخلکلیه بالا 10px هستند
- پدیدههای داخلکلیه راست و چپ 5px هستند
- پدیدههای داخلکلیه پایین 15px هستند
مثال 3
padding:10px 5px;
- پدیدههای داخلکلیه بالا و پایین 10px هستند
- پدیدههای داخلکلیه راست و چپ 5px هستند
مثال 4
padding:10px;
- تمام 4 پدیدههای داخلکلیه 10px هستند
لطفاً به اینجا نیز مراجعه کنید:
دستورالعمل CSS:مargins داخلی CSS
دستورالعمل HTML DOM:ویژگی padding
قانون CSS
padding: length|initial|inherit;
مقدار ویژگی
مقدار | توضیح |
---|---|
auto | پدیدههای داخلکلیه توسط مرورگر محاسبه میشوند. |
length | تعیین میکند که مقدار پدیدههای داخلکلیه با واحد مشخصی است، مانند پیکسل، سانتیمتر و غیره. مقدار پیشفرض 0px است. |
% | تعیین میکند که پدیدههای داخلکلیه بر اساس درصد عرض عنصر والد تنظیم شوند. |
inherit | تعیین میکند که باید پدیدههای داخلکلیه از عنصر والد ارثبخش شوند. |
جزئیات فنی
مقدار پیشفرض: | 0 |
---|---|
میراثپذیری: | خیر |
نسخه: | CSS1 |
قانونهای JavaScript: | اجسام.style.padding="10px 5px" |
مثال عملی TIY
- تمام پدیدههای داخلکلیه در یک توضیح
- این مثال نمایش میدهد که چگونه میتوان تمام پدیدههای داخلکلیه را در یک توضیح تنظیم کرد، که میتواند یک تا چهار مقدار داشته باشد.
پشتیبانی مرورگر
اعداد در جدول نشاندهنده نسخه اولین مرورگر هستند که از این ویژگی پشتیبانی میکند.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
- صفحه قبل overscroll-behavior-y
- صفحه بعدی padding-block