گروه مقاله : CSS
تاريخ انتشار : 1394/02/02 - 15:16
كد :227
در واقع padding فاصله ای شفاف بین محتوای عنصر تا دیواره ی داخلی همان عنصر می باشد.
در واقع padding دور محتوای هر عنصر را احاطه می کند که قبل از border قرار می گیرد. padding کاملا شفاف و بدون پس ضمینه است. می توانید padding را از 4 سمت مختلف (top, right, bottom, left) با توجه به نیاز خود تغییر دهید.
padding-top: 10px;
padding-right: 15px;
padding-bottom: 19px;
padding-left: 8px;
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
padding-top: 100px;
padding-bottom: 10px;
padding-right: 150px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="ex">This is a paragraph with specified padding.</p>
</body>
</html>
به طور خلاصه، پارامترهای padding به صورت ساعتگرد تعریف می شوند. به مثال زیر توجه کنید :
padding: top right bottom left;
padding: 10px 20px 5px 15px;
مثال :
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
padding: 100px 150px 10px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="ex">This is a paragraph with specified padding.</p>
</body>
</html>
همچنین اگر بخواهید از همه طرف به یک اندازه padding بدهید، مثلا از همه طرف 10px می توانید آن را به صورت خلاصه به این شکل بنویسید :
padding: 10px;
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
padding: 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified padding.</p>
<p class="ex">This is a paragraph with specified padding.</p>
</body>
</html>
یا اگر مقدار padding از بالا و پایین یکسان باشد مثلا 20px و از چپ و راست نیز یکسان باشد مثلا 10px، می توان آن را به طور خلاصه بصورت زیر نوشت :
padding: 20px 10px;
چنانچه padding فقط از سمت چپ و راست یکسان باشد نیز به صورت خلاصه می توان آن را مانند مثال زیر نوشت:
padding: 10px 20px 15px;
توجه داشته باشید که مقدار 20px هم از راست و هم از چپ می باشد.
مقادیری که به padding می توان داد :
-
مقدار دهی عددی : با استفاده از مقادیر بر حسب px, pt, em, … می توان اندازه ی padding را تعریف نمود.
-
درصد : در این حالت padding بر حسب درصد با توجه به فضای داخل عنصر در نظر گرفته می شود.
نکته : از مقادیر منفی نیز می توانید برای padding استفاده کنید.