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