ویژگی padding در CSS

padding Property

ویژگی کوتاه نویسی 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-right

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

padding-right: 10%;

padding-bottom

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

padding-bottom: 5em;

padding-left

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

padding-left: 2rem;

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

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 پشتیبانی می کنند.