پدینگ (Padding) در CSS

( سه‌شنبه ، 1 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه نوزدهم

آموزگار :

آرزو محرابی

پدینگ یا padding در زبان CSS چیست و چرا باید از آن استفاده کنیم ؟ در واقع منظور از پدینگ (padding) همان فضای داخلی است و در این جلسه به صورت کامل درباره آن توضیح خواهیم داد... ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

آرزو محرابی

مدرس دوره های آموزش طراحی سایت و برنامه نویسی

پدینگ (Padding) در CSS

( سه‌شنبه ، 1 خرداد سال 1403 )

در این جلسه می‌خواهیم با مفهوم padding آشنا شویم و نکاتی را در این باره بیاموزیم. ویژگی padding فضای خالی در درون عنصر ایجاد می‌کند. در واقع پدینگ یعنی فضای بین محتوا و حاشیه ی عنصر. به زبان ساده اگر به یک عنصر پدینگ بدهیم آن عنصر از درون چاق می‌شود.

ما می‌توانیم این خصوصیت را برای هر طرف از عنصر که بخواهیم اعمال کنیم. برای این کار از دستورات زیر استفاده می‌کنیم:

  • Padding-top :   px ;
  • Padding-right :   px ;
  • Padding-bottom :   px ;
  • Padding-left :   px ;

برخی نکات مربوط به مباحث پدینگ و مارجین و بوردرها شبیه به هم هستند. از جمله اینکه می‌توانیم به هر طرف از عنصر این ویژگی‌ها را اعمال کنیم و همچنین از دستورات خلاصه شده استفاده کنیم. پس

padding : 20px 30px 40px 50px ;

این دستور از سمت بالا 20px ، از سمت راست 30px، از سمت پایین 40px و از سمت چپ 50px پدینگ ایجاد می‌کند.

Padding : 20px 30px 40px ;

و این دستور از سمت بالا 20px، از سمت راست و چپ 30px و از سمت پایین 40px پدینگ ایجاد می‌کند.

Padding : 20px 30px ;

و در این حالت هم از بالا و پایین 20px و از سمت راست و چپ 30px پدینگ ایجاد می‌شود. و همچنین اگر تنها یک مقدار به آن بدهیم به همان میزان از چهار طرف پدینگ ایجاد می‌شود.

نکته : padding‌ها نمی‌توانند مقادیر منفی را بگیرند و تنها مقادیر مثبت برای آن‌ها مجاز است.

فرض کنید عنصری را ایجاد کرده ایم و به آن عرض 300px داده ایم:

div{

background-color: blue;

width: 300px ;

}

حال از سمت راست  و چپ به آن padding می‌دهیم :

div{

background-color: blue;

width: 300px ;

padding : 0px  500px;

}

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

با استفاده از دستور box-sizing می‌توانیم این مساله را به خوبی حل کنیم. به شکل زیر:

div{

background-color: blue;

width: 300px ;

padding-right: 500px;

box-sizing: border-box ;

}

در این صورت دیگر عرض عنصر به هم نمی‌خورد و در صورت نیاز محتوا کوچکتر می‌شود تا عرض حفظ شود.

برای نوشتن دیدگاه باید وارد بشوید.

2 دیدگاه. Leave new

فهرست