خانه / آموزش CSS / بخش هشتم- آموزش خصوصیات Padding پدینگ در CSS

مهندس فاطمه درخشان

تاریخ بروزرسانی: ۲۰ بهمن ۱۳۹۷ تعداد بازدید : 20 بازدید بدون دیدگاه

بخش هشتم- آموزش خصوصیات Padding پدینگ در CSS

قدم قبلی >

< قدم بعدی

CSS Padding

خصوصیات CSS padding برای ایجاد فضای اطراف محتوای عنصر، در داخل هر مرز یا border تعریف شده استفاده می شود.

با استفاده از CSS، شما کنترل کاملی بر روی Padding خواهید داشت، شما امکان تنظیم خصوصیات هر طرف یک عنصر را خواهید داشت (بالا، راست، پایین و چپ) .

Padding – کناره های تکی

CSS دارای خصوصیاتی برای تعیین پدینگ برای هر طرف یک عنصر است.

padding-top
padding-right
padding-bottom
padding-left

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

length(طول)- طول را در قالب px، pt، cm و غیره مشخص می کند.
٪ – طول را در قالب ٪ (درصد) طول عنصر مشخص می کند.
inherit(ارث بردن)- مشخص می کند که پدینگ باید طول را از والد عنصر بگیرد.

توجه: مقادیر منفی مجاز نیستند.

مثال زیر پدینگ های مختلف را برای هر چهار طرف یک عنصر <div> تنظیم می کند:

<html>
<head>
<style>
div {
  border: 1px solid black;
  background-color: lightblue;
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>این عنصر دارای پدینگ بالای ۵۰ پیکسل، پهنای راست ۳۰ پیکسل، پهنای باند پایین از ۵۰ پیکسل و پهپاد سمت چپ ۸۰ پیکسل است..</div>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

background-color: lightblue;

padding-top: 50px;

padding-right: 30px;

padding-bottom: 50px;

padding-left: 80px;

}

</style>

</head>

<body>

<h2>Using individual padding properties</h2>

<div>این عنصر دارای پدینگ بالای ۵۰ پیکسل، پهنای راست ۳۰ پیکسل، پهنای باند پایین از ۵۰ پیکسل و پهپاد سمت چپ ۸۰ پیکسل است..</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

Padding-خلاصه نویسی کدها

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

padding-top
padding-right
padding-bottom
padding-left

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

مثال:

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

padding: 25px 50px 75px 100px;

.پدینگ بالا ۲۵ پیکسل است
.پدینگ راست ۵۰ پیکسل است
.پدینگ پایین ۷۵ پیکسل است
.پدینگ چپ ۱۰۰ پیکسل است

<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 4 values</h2>

<div>این عنصر دارای پدینگ بالای ۲۵ پیکسل، پدینگ راست ۵۰ پیکسل، پدینگ پایین ۷۵ پیکسل و پدینگ چپ ۱۰۰ پیکسل است.</div>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px 100px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The padding shorthand property - 4 values</h2>

<div>این عنصر دارای پدینگ بالای ۲۵ پیکسل، پدینگ راست ۵۰ پیکسل، پدینگ پایین ۷۵ پیکسل و پدینگ چپ ۱۰۰ پیکسل است.</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

و اگر خصوصیات padding دارای سه مقدار باشد خواهیم داشت:

padding: 25px 50px 75px;

پدینگ بالا ۲۵ پیکسل است
پدینگ راست و چپ ۵۰ پیکسل است
پدینگ پایین ۷۵ پیکسل است

<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 3 values</h2>

<div>این عنصر دارای پدینگ بالای ۲۵پیکسل، پدینگ راست و چپ ۵۰  پیکسل و پدینگ پایین ۷۵ پیکسل است.</div>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px 75px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The padding shorthand property - 3 values</h2>

<div>این عنصر دارای پدینگ بالای ۲۵پیکسل، پدینگ راست و چپ ۵۰ پیکسل و پدینگ پایین ۷۵ پیکسل است.</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

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

padding: 25px 50px;

پدینگ بالا و پایین ۲۵px هستند
پدینگ راست و چپ ۵۰ پیکسل است

<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 2 values</h2>

<div>این عنصر دارای پدینگ بالا و پایین  ۲۵پیکسل  و پدینگ راست و چپ ۵۰  پیکسل است.</div>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px 50px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The padding shorthand property - 2 values</h2>

<div>این عنصر دارای پدینگ بالا و پایین ۲۵پیکسل و پدینگ راست و چپ ۵۰ پیکسل است.</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

مثال:

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

padding: 25px؛
تمام چهار پرده ۲۵ پیکسل است

<html>
<head>
<style>
div {
  border: 1px solid black;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The padding shorthand property - 1 value</h2>

<div>این عنصر دارای پدینگ بالا و پایین و چپ و راست  ۲۵پیکسل است.</div>

</body>
</html>

<html>

<head>

<style>

div {

border: 1px solid black;

padding: 25px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>The padding shorthand property - 1 value</h2>

<div>این عنصر دارای پدینگ بالا و پایین و چپ و راست ۲۵پیکسل است.</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

Padding و عرض عنصر

ویژگی عرض CSS ،عرض محدوده محتوی عنصر را مشخص می کند. محدوده محتوا بخشی در داخل محفظه، مرز و حاشیه عنصر (مدل جعبه) است.

بنابراین، اگر یک عنصر دارای عرض مشخص شده باشد، ابعاد پدینگ اضافه شده به آن عنصر به عرض کل عنصر افزوده می شود. این اغلب یک نتیجه نامطلوب به بار می آورد.

در مثال زیر، عنصر <div> دارای عرض ۳۰۰ پیکسل می باشد. با این حال، پهنای واقعی ارائه شده برای عنصر ۳۵۰ پیکسل (۳۰۰ پیکسل+۲۵ پیکسل پدینگ راست+۲۵پیکسل پدینگ چپ) خواهد بود:

<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

}

div.ex2 {

width: 300px;

padding: 25px;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>Padding and element width</h2>

<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید:

در اینجا برای حفظ عرض عنصر<div> در ۳۰۰پیکسل، بدون توجه به مقدار padding، شما می توانید از ویژگی box-sizing استفاده کنید. این باعث می شود که اگر پدینگ را افزایش دهید، باز هم عنصر مورد نظر بتواند عرض خود را با افزایش فضای محتوای موجود، حفظ کند. به این مثال توجه کنید:

<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

<html>

<head>

<style>

div.ex1 {

width: 300px;

background-color: yellow;

}

div.ex2 {

width: 300px;

padding: 25px;

box-sizing: border-box;

background-color: lightblue;

}

</style>

</head>

<body>

<h2>Padding and element width</h2>

<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.

</div>

</body>

</html>

با اجرا کردن کد بالا تصویر زیر را در خروجی خواهید دید: