اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی padding در CSS

ویژگی padding در CSS

padding Property

عناصر مرتبط:
margin  background-clip  box-sizing

ویژگی کوتاه نویسی padding در CSS اندازه ی فضای خالی را در چهار جهتِ محتوای عنصر از حاشیه آن (border) مشخص می کند. این ویژگی مقادیر چهار ویژگی padding-top, padding-right, padding-bottom و padding-left را مشخص می کند.

نحوه نوشتار

/* به هر چهار طرف اضافه می کند */
padding: 12px;

/* افقی | عمودی */
padding: 5% 10%;

/* پایین | افقی | بالا */
padding: 1rem 2% 20px;

/* چپ | پایین | راست | بالا */
padding: 5px 10px 0 15px;

padding: padding-top | padding-right | padding-bottom | padding-left;

ویژگی padding می تواند یک، دو، سه و یا چهار ویژگی را مشخص کند.

  • اگر یک مقدار مشخص شود: این مقدار به هر چهار طرفِ محتوای عنصر اعمال خواهد شد.
  • اگر دو مقدار مشخص شود: اولی به بالا و پایین (محور عمودی) و دومین مقدار به راست و چپ (محور افقی) محتوای عنصر اعمال خواهد شد.
  • اگر سه مقدار مشخص شود: اولی به بالا، دومی به چپ و راست (محور افقی) و سومی به پایین محتوای عناصر اعمال خواهد شد.
  • اگر چهار مقدار مشخص شود: اولی به بالا، دومی به راست، سومی به پایین و چهارمی به سمت چپ محتوای عنصر اعمال خواهد شد. (ساعت گرد)

padding-top

این ویژگی به تنهایی فاصله بالای محتوای عنصر از border یا حاشیه عنصر را مشخص می کند.

padding-top: 15px;
padding-top-sample

padding-right

این ویژگی به تنهایی فاصله سمت راست محتوای عنصر از border یا حاشیه عنصر را مشخص می کند.

padding-right: 10%;
padding-bottom-sample

padding-bottom

این ویژگی به تنهایی فاصله پایین محتوای عنصر از border یا حاشیه عنصر را مشخص می کند.

padding-bottom: 5em;
padding-bottom-sample

padding-left

این ویژگی به تنهایی فاصله سمت چپ محتوای عنصر از border یا حاشیه عنصر را مشخص می کند.

padding-left: 2rem;
padding-left-sample

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="box1">
      padding:20px;
</div>
<div class="box2">
      padding-top:20px;
</div>
<div class="box3">
      padding-right:20px;
</div>
<div class="box4">
      padding-bottom:20px;
</div>
<div class="box5">
      padding-left:20px;
</div>

css

 div {
   border: 2px solid orangered;
   background-color: lightgreen;
   margin: 20px 15px 0 0;
   display: inline-block;
}
.box1 {
   padding: 20px; 
}
.box2 {
   padding-top: 20px; 
}
.box3 {
   padding-right: 20px; 
}
.box4 {
   padding-bottom: 20px; 
}
.box5 {
   padding-left: 20px; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی در CSS پشتیبانی می کنند.

پست قبلی

ویژگی overflow در CSS

پست بعدی

ویژگی perspective در CSS

پست بعدی
css-perspective-property

ویژگی perspective در CSS

دیدگاهتان را بنویسید لغو پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

تمامی حقوق برای اپن تگ محفوظ است. استفاده از مطالب تنها با ذکر منبع مجاز است.

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن