CSS

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

خصوصیت 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 پیکسل از بالا ،پایین، چپ و راست است.
 

جلسه بعد 

جلسه قبل

کتاب الکترونیکی با زود انزالی خداحافظی کنید

تنها برنامه جامع آموزشی برای درمان زود انزالی

۱۴,۸۰۰ تومان ۹,۷۰۰ تومان

ضمانت بازگشت 100 درصدی وجه در صورت عدم رضایت از محصول

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

اطلاعات بیشتر

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد.

دکمه بازگشت به بالا