سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه گذشته با ویژگی overflow-y آشنا شدیم؛ این ویژگی برای موقعیت هایی چون برش محتوا، افزودن اسکرول بار و یا overflow شدن در هنگام سرریز محتوا از لبه های بالا و پایین ایجاد شده است.
در ادامه این دوره شما را به آموزش کار با ویژگی padding در CSS دعوت می کنیم.
آموزش کار با ویژگی padding در CSS
به مثال زیر توجه نمایید؛ در این مثال padding را برای چهار گوشه از یک عنصر <p> با مقدار ۳۵ pixels تنظیم کرده ایم.
تعریف و کاربرد
یک padding در یک عنصر در حقیقت به فضایی گفته می شود که میان محتوای موجود و مرز قرار می گیرد؛ ویژگی padding یک ویژگی مختصر برای ویژگی padding-top، ویژگی padding-right، ویژگی padding-bottom و در نهایت ویژگی padding-left است.
نکته
padding یک فضای اضافه را درون یک عنصر ایجاد می کند، در حالی که حاشیه باعث ایجاد فضای اضافی در اطراف یک عنصر می شود.
ویژگی padding می تواند از یک تا چهار مقدار داشته باشد.
اگر ویژگی padding دارای چهار مقدار باشد (padding: 10px 5px 15px 20px)
- بالای padding برابر است با ۱۰px
- سمت راست padding برابر است با ۵px
- پایین padding برابر است با ۱۵px
- سمت چپ padding برابر است با ۲۰px
اگر ویژگی padding دارای سه مقدار باشد (padding: 10px 5px 15px)
- بالای padding برابر است با ۱۰px
- سمت راست padding برابر است با ۵px
- پایین padding برابر است با ۱۵px
اگر ویژگی padding دارای دو مقدار باشد (padding: 10px 5px)
- بالا و پایین padding برابر است با ۱۰px
- سمت راست و چپ padding برابر است با ۵px
اگر ویژگی padding دارای یک مقدار باشد (padding: 10px )
- همه padding ها برابر با ۱۰px خواهد بود.
نکته
مقادیر منفی مجاز نیستند.
| مقدار پیش فرض | ۰ |
| به ارث بردن | خیر |
| متحرک بودن | بله |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.padding=”100px 20px |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی padding-bottom در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| padding-bottom | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
سینتکس CSS
مثال :
| padding: length|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
| length | padding را در px, pt, cm, etc مشخص می کند. مقدار پیش فرض ۰ است. |
| % | padding را به صورت درصد در عرض عنصر تعیین می کند. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
تنظیم padding برای یک عنصر <p> با مقدار ۳۵ pixels برای بالا و پایین و مقدار ۷۰ pixels برای چپ و راست :
مثال دو
تنظیم padding برای یک عنصر <p> با مقدار ۳۵ pixels برای بالا و مقدار ۷۰ pixels برای چپ و راست و مقدار ۵۰ pixels برای پایین :
مثال :
| p { padding: 35px 70px 50px; } |
مثال سه
تنظیم padding برای یک عنصر <p> با مقدار ۳۵ pixels برای بالا و مقدار ۷۰ pixels برای راست و مقدار ۵۰ pixels برای پایین و ۹۰ pixels برای چپ :
مثال :
| p { padding: 35px 70px 50px 90px; } |
کلام آخر
در این جلسه آموزش کار با ویژگی padding در CSS را ارائه نمودیم؛ padding به فضایی گفته می شود که میان محتوای موجود و مرز قرار می گیرد.
در جلسه بعدی در خصوص ویژگی padding-bottom به بحث و آموزش می پردازیم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
