Padding
این عنصر دارای padding 70px است.
ویژگیهای padding
در CSS برای ایجاد فاصله در اطراف محتوای یک عنصر، درون هر گونه کادر تعریف شدهای استفاده میشوند.[۱]
به کمک CSS، کنترل کامل paddingها (حاشیه های درونی) را دارید. ویژگیهایی برای تنظیم padding در هر جهت یک عنصر (بالا، راست، پایین، و چپ) وجود دارد.
Padding - جهت های جداگانه
CSS ویژگیهایی برای مشخص کردن padding برای هر جهت یک عنصر دارد:
padding-top
padding-right
padding-bottom
padding-left
تمامی ویژگیهای padding میتوانند مقادیر زیر را داشته باشند:
- length - مقدار padding را بر حسب px , pt ,cm، و غیره مشخص میکند
- % - مقدار padding را بر حسب % ای از عرض عنصری که در آن قرار گرفته مشخص میکند
- inherit - مشخص میکند که فاصله padding میبایست از عنصر والد ارث بری کند
نکته:مقادیر منفی مجاز هستند.
مثال
مقادیر متفاوت padding برای چهار جهت یک عنصر <div> تنظیم میکند:
Padding - ویژگی کوتاه شده
برای کوتاه سازی کد، میتوان که تمامی ویژگیهای padding را در یک ویژگی مشخص کرد.
ویژگی padding
یک ویژگی مختصر برای ویژگیهای مجزای padding زیر است:
padding-top
padding-right
padding-bottom
padding-left
بنابراین، شیوه کار به این صورت است:
|
padding: 25px 50px 75px 100px; |
مثال
از ویژگی مختصر padding با چهار مقدار استفاده میکند:
|
padding: 25px 50px 75px; |
مثال
از ویژگی مختصر padding با سه مقدار استفاده میکند:
|
padding: 25px 50px; |
مثال
از ویژگی مختصر padding با دو مقدار استفاده میکند:
|
padding: 25px; |
مثال
از ویژگی مختصر padding با یک مقدار استفاده میکند:
Padding و عرض عنصر
ویژگی width
در CSS عرض ناحیه محتوای یک عنصر را مشخص میکند. ناحیه محتوا بخشی درون padding، کادر، و margin یک عنصر (مدل جعبه) است.
بنابراین، اگر عنصری یک مقدار عرض مشخص داشته باشد، مقدار paddingای که به آن عنصر اضافه میشود به مجموع عرض آن عنصر نیز اضافه میگردد. این امر اغلب موجب یک نتیجه نامطلوب میشود.
مثال
در اینجا، عرض عنصر <div>، ۳۰۰ پیکسل داده شدهاست. اما عرض واقعی عنصر <div>، ۳۵۰ پیکسل خواهد بود (25px + 300px padding چپ + 25px padding راست):
برای حفط اندازه عرض برابر با ۳۰۰ پیکسل، بدون توجه به مقدار padding، میتوانید از ویژگی box-sizing
استفاده کنید. این امر موجب میشود که عنصر عرض خود را حفظ کند، اگر شما مقدار padding را افزایش دهید، فضای محتوای موجود کاهش خواهد یافت.
مثال
استفاده از ویژگی box-sizing برای نگه داشتن عرض در ۳۰۰ پیکسل، بدون توجه به مقدار padding:
مثالهای بیشتر
این مثال نحوه تنظیم padding چپ یک عنصر <p> را مشخص میکند.
این مثال نحوه تنظیم padding راست یک عنصر <p> را نمایش میدهد.
این مثال نحوه تنظیم padding بالای یک عنصر <p> را نمایش میدهد.
این مثال نحوه تنظیم padding پایین عنصر <p> را نمایش میدهد.
خود را با تمرینها آزمایش کنید!
تمام ویژگیهای padding در CSS
ویژگی | توضیحات |
---|---|
padding | یک ویژگی مختصر برای تنظم تمامی ویژگیهای padding در یک اعلان |
padding-bottom | تنظیم padding پایین یک عنصر |
padding-left | تنظیم padding چپ یک عنصر |
padding-right | تنظیم padding راست یک عنصر |
padding-top | تنظیم padding بالای یک عنصر |
منابع آموزشی