جلسه 7: خاصیت Padding در CSS

خواندن این مطلب 3 دقیقه زمان میبرد

خصوصیت Padding در CSS، برای ایجاد فضای خالی مابین محتوا و مرز تعریف شده به کار می رود.

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

Padding در جهات مختلف

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

padding-top: فضای داخلی در جهت بالا
padding-right: فضای داخلی در جهت راست
padding-bottom: فضای داخلی در جهت پایین
padding-left: فضای داخلی در جهت چپ

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

طول بر اساس px، pt، cm و غیره.
طول بر اساس ٪ درصد ٪ .
inherit – مشخص می کند که padding باید از عنصر پدر خود به ارث برده شود.

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

اگر به مثال زیر دقت کنید متوجه خواهید شد که به چهار جهت متن یا عنصر html پدینگ داده ایم:

تبلیغات

<!DOCTYPE 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>

<div>این عنصر دارای پدینگ 50 پیکسل از بالا، 30 پیکسل از راست، 50 پیکسل از پایین و 80 پیکسل از چپ است.
</div>

</body>
</html>

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 50 پیکسل از بالا، 30 پیکسل از راست، 50 پیکسل از پایین و 80 پیکسل از چپ است.

Padding مختصر و کوتاه

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

در صورتی که بخواهیم هر چهار ویژگی Padding را در یک ویژگی بگنجانیم به صورت زیر عمل می کنیم:

padding: 25px 50px 75px 100px؛

تبلیغات

مقدار اول: پدینگ 25 پیکسل از جهت بالا
مقدار دوم: پدینگ 50 پیکسل از جهت راست
مقدار سوم: پدینگ 75 پیکسل از جهت پایین
مقدار چهارم: پدینگ 100 پیکسل از جهت چپ

مقادیر در جهت حرکت عقربه های ساعت بر عنصر اعمال می شوند. به مثال زیر دقت کنید:

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

<div>این عنصر دارای پدینگ 25 پیکسل از بالا، 50 پیکسل از راست، 75 پیکسل از پایین و 100 پیکسل از چپ است.</div>

</body>
</html>

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از بالا، 50 پیکسل از راست، 75 پیکسل از پایین و 100 پیکسل از چپ است.

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

padding: 25px 50px 75px؛

مقدار اول: پدینگ 25 پیکسل از جهت بالا
مقدار دوم: پدینگ 50 پیکسل از جهت چپ و راست
مقدار سوم: پدینگ 75 پیکسل از جهت پایین

در صورتی که خاصیت Padding دارای سه مقدار باشد، مقدار دوم در جهات چپ و راست اعمال خواهد شد.

تبلیغات

به مثال زیر دقت کنید:

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

<div>این عنصر دارای پدینگ 25 پیکسل از بالا، 50 پیکسل از چپ و راست و 75 پیکسل از پایین است.</div>

</body>
</html>

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از جهت بالا، 50 پیکسل از جهت چپ و راست و 75 پیکسل از جهت پایین است.

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

padding: 25px 50px;

مقدار اول: پدینگ 25 پیکسل از جهت بالا و پایین
مقدار دوم: پدینگ 50 پیکسل از جهت چپ و راست

در صورتی که پدینگ دارای دو مقدار باشد، مقدار اول در جهات بالا و پایین و مقدار دوم در جهات چپ و راست اعمال خواهد شد.

تبلیغات

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

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

</body>
</html>

نتیجه به شکل زیر است:

این عنصر دارای پدینگ 25 پیکسل از جهت بالا و پایین و 50 پیکسل از جهت چپ و راست است.

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

padding: 25px;

در صورتی که پدینگ دارای یک مقدار باشد، به تمام جهت یک میزان پدینگ اعمال خواهد شد.

به مثال زیر دقت کنید:

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

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

</body>
</html>

نتیجه به شکل زیر است:

تبلیغات

این عنصر دارای پدینگ 25 پیکسل از بالا ،پایین، چپ و راست است.

جلسه بعد

جلسه قبل

4.7/5 - (3 امتیاز)

برچسب ها