خاصیت padding در CSS
خاصیت Padding در CSS
خصوصیت padding فضای خالی بین محتوی و لبه های یک عنصر را تنظیم می کند، رنگ پس زمینه این فضا از رنگ پس زمینه عنصر پیروی می کند.
می توان اندازه آن را برای ضلع های مختلف (بالا، راست، پایین و چپ) به صورت کلی و یا جزء به جزء تعیین نمود.
مقادیر ممکن خصوصیت Padding
خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:
| Value | Description |
|---|---|
| length | یک حاشیه ثابت تعریف می شود (px, pt, em) |
| % | درصدی از عنصر برای حاشیه درنظر گرفته می شود. |
تنظیم حاشیه ها، به صورت جداگانه
در CSS این امکان وجود دارد که مقدار padding را برای اضلاع مختلف به صورت جداگانه تنظیم نمود:
مثال (خاصیت padding در CSS)
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
مختصر نویسی - Padding
برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار ضلع یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت padding استفاده کنید:
خصوصیت padding از یک تا چهار مقدار می تواند داشته باشد:
- padding:25px 50px 75px 100px;
- حاشیه بالا 25 پیکسل
- حاشیه راست 50 پیکسل
- حاشیه پایین 75 پیکسل
- حاشیه چپت 100 پیکسل
- padding:25px 50px 75px;
- حاشیه بالا 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
- حاشیه پایین 75 پیکسل
- padding:25px 50px;
- حاشیه بالا و پایین 25 پیکسل
- حاشیه راست و چپ 50 پیکسل
- padding:25px;
- حاشیه بالا، راست، پایین و چپ 25 پیکسل
تنظیم تمام اضلاع با یک اعلان
این مثال نشان می دهد که چگونه از یک خصوصیت کوتاه برای تنظیم کردن همه حاشیه های اطراف یک عنصر استفاده نمود.
تنظیم فضای سمت چپ
این مثال نشان می دهد که چگونه فضای سمت چپ عنصر p را تنظیم کنیم.
تنظیم فضای سمت راست
این مثال نشان می دهد که چگونه فضای سمت راست عنصر p را تنظیم کنیم.
تنظیم فضای بالا
این مثال نشان می دهد که چگونه فضای بالای عنصر p را تنظیم کنیم.
تنظیم فضای پایین
این مثال نشان می دهد که چگونه فضای پایین عنصر p را تنظیم کنیم.
کلیه خواص مربوط به padding
| خصوصیت | توضیحات |
|---|---|
| padding | حاشیه های اطراف محتوای یک عنصر را به صورت مختصر مشخص می کند. |
| padding-bottom | حاشیه پایین محتوای یک عنصر را مشخص می کند. |
| padding-left | حاشیه چب محتوای یک عنصر را مشخص می کند. |
| padding-right | حاشیه راست محتوای یک عنصر را مشخص می کند. |
| padding-top | حاشیه بالای محتوای یک عنصر را مشخص می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 30052
دیدگاه‌ها
سلام من از خاصیت padding برای ایجاد منو استفاده میکنم،برای اینکه وقتی یک div جدید ایجاد میکنیم و اگه یک متن را در آن بنویسیم متن به بالا و سمت چپ یا راست میچسبه،حالا برای این که به اصطلاح چسبندگی رو از بین ببریم باید از خاصیت padding در سی اس اس استفاده کنیم،مشکل من این جاست وقتی که paddding مقدارش رو 10px قرار میدم باید 20px از width و height مربوط به div کم کنیم من این کار را انجام میدم اما اون متن از div خارج میشه،من این دستورات را به درستی مینویسم،علت این مشکل چیست؟لطفا پاسخ بدید.
با سلام.
وقتی شما با اندازه به طور مستقیم کار کنی، باید حواست به خیلی چیزا باشه و از طرفی تو قسمت‌های مختلف و مرورگرهای مختلف ممکن نحوه نمایش فرق کنه.
کد خودتون رو بذارید تا تست کنم، ببینم چیه؟
به نقل از hosein:
سلام، انجام شد با تشکر از دقت شما