سبد خرید (0)

تبلیغات

خاصیت padding در CSS

خاصیت Padding در CSS

Wiki

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

می توان اندازه آن را برای ضلع های مختلف (بالا، راست، پایین و چپ) به صورت کلی و یا جزء به جزء تعیین نمود.

مقادیر ممکن خصوصیت Padding

خصوصیات مربوط به حاشیه ممکن است به صورت زیر مقداردهی شوند:

ValueDescription
length یک حاشیه ثابت تعریف می شود (px, pt, em)
% درصدی از عنصر برای حاشیه درنظر گرفته می شود.

 تنظیم حاشیه ها، به صورت جداگانه

Wiki

در CSS این امکان وجود دارد که مقدار padding را برای اضلاع مختلف به صورت جداگانه تنظیم نمود:

مثال (خاصیت padding در CSS)

padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
خودتان امتحان کنید »

مختصر نویسی - Padding

Wiki

برای مختصر نویسی و کوتاه شدن کد، می توانید همه چهار ضلع یک عنصر را در یک خصوصیت تعریف کنید، برای این منظور از خصوصیت padding استفاده کنید:

مثال (خاصیت padding در CSS)

padding:25px 50px;
خودتان امتحان کنید »

خصوصیت padding از یک تا چهار مقدار می تواند داشته باشد:

  1. padding:25px 50px 75px 100px;
    • حاشیه بالا 25 پیکسل
    • حاشیه راست 50 پیکسل
    • حاشیه پایین 75 پیکسل
    • حاشیه چپت 100 پیکسل
  2. padding:25px 50px 75px;
    • حاشیه بالا 25 پیکسل
    • حاشیه راست و چپ 50 پیکسل
    • حاشیه پایین 75 پیکسل
  3. padding:25px 50px;
    • حاشیه بالا و پایین 25 پیکسل
    • حاشیه راست و چپ 50 پیکسل
  4. padding:25px;
    • حاشیه بالا، راست، پایین و چپ 25 پیکسل

Examples

مثال - خودتان امتحان کنید

Wiki

تنظیم تمام اضلاع با یک اعلان
این مثال نشان می دهد که چگونه از یک خصوصیت کوتاه برای تنظیم کردن همه حاشیه های اطراف یک عنصر استفاده نمود.

تنظیم فضای سمت چپ
این مثال نشان می دهد که چگونه فضای سمت چپ عنصر p را تنظیم کنیم.

تنظیم فضای سمت راست
این مثال نشان می دهد که چگونه فضای سمت راست عنصر p را تنظیم کنیم.

تنظیم فضای بالا
این مثال نشان می دهد که چگونه فضای بالای عنصر p را تنظیم کنیم.

تنظیم فضای پایین
این مثال نشان می دهد که چگونه فضای پایین عنصر p را تنظیم کنیم.


کلیه خواص مربوط به padding

Wiki

خصوصیتتوضیحات
padding حاشیه های اطراف محتوای یک عنصر را به صورت مختصر مشخص می کند.
padding-bottom حاشیه پایین محتوای یک عنصر را مشخص می کند.
padding-left حاشیه چب محتوای یک عنصر را مشخص می کند.
padding-right حاشیه راست محتوای یک عنصر را مشخص می کند.
padding-top حاشیه بالای محتوای یک عنصر را مشخص می کند.

دیدگاه‌ها  

+1 # حسین 2000 1395-03-30 00:21
سلام من از خاصیت padding برای ایجاد منو استفاده میکنم،برای اینکه وقتی یک div جدید ایجاد میکنیم و اگه یک متن را در آن بنویسیم متن به بالا و سمت چپ یا راست میچسبه،حالا برای این که به اصطلاح چسبندگی رو از بین ببریم باید از خاصیت padding در سی اس اس استفاده کنیم،مشکل من این جاست وقتی که paddding مقدارش رو 10px قرار میدم باید 20px از width و height مربوط به div کم کنیم من این کار را انجام میدم اما اون متن از div خارج میشه،من این دستورات را به درستی مینویسم،علت این مشکل چیست؟لطفا پاسخ بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1395-04-05 13:57
با سلام.
وقتی شما با اندازه به طور مستقیم کار کنی، باید حواست به خیلی چیزا باشه و از طرفی تو قسمت‌های مختلف و مرورگرهای مختلف ممکن نحوه نمایش فرق کنه.
کد خودتون رو بذارید تا تست کنم، ببینم چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # امیر پهلوان صادق 1393-03-12 22:35
به نقل از hosein:
سلام جدول مربوط به خواص padding رو ویرایش کنید بجای padding نوشتین margin

سلام، انجام شد با تشکر از دقت شما
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی CSS

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!