آموزش CSSآموزش طراحی سایت

جلسه ۱۸ – padding در CSS

آشنایی با فواصل درونی عناصر یا Padding

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

ویژگی Padding در CSS

در این مقاله از سری مقالات آموزش کامل css ، یادگیری کادرهای غیرقابل مشاهده رو باهم شروع می‌کنیم.

اولین نوع از کادر های غیر قابل مشاهده، padding یا فواصل درونی عناصر هستن. البته اگر در رابطه با کادر ها هنوز اطلاعی ندارید، پیشنهاد میکنم مقالات فصل ۶ – کادر ها را مشاهده کنید.

مفهوم padding رو می‌تونیم به شکل زیر تعریف کنیم:

padding، عبارت است از فاصله محتوای درون یک عنصر، از دیوار های همون عنصر.

برای درک بهتر این تعریف، به تصویر زیر توجه کنین:

آشنایی با پدینگ در سی اس اس
آشنایی با پدینگ در سی اس اس

padding برخلاف border، دستورات چندان مفصلی نداره و همونطور که در مقدمه گفتیم، از جنس فاصلست. دستور padding در css را در این مقاله یاد میگیریم.

خاصیت های مربوط به padding در CSS

خاصیت های padding به شکل زیر تعریف می‌شن:

  • padding: فاصله محتوا از تمام مرز های عنصر (shorthand property)
  • padding-left: فاصله محتوا از مرز سمت چپ
  • padding-right: فاصله محتوا از مرز سمت راست
  • padding-bottom: فاصله محتوا از مرز سمت پایین
  • padding-top: فاصله محتوا از مرز سمت بالا

مقادیر مورد قبول این خاصیت ها، برحسب واحد های زیر نوشته می‌شن:

شرحمقدار
مرورگر حاشیه ی دور عناصر / margin را خودکار محاسبه و اندازه گیری می‌کند.auto
حاشیه ی یک عنصر از عنصر / margin دیگر را بر حسب واحدهای(پیکسل) px , (نقطه) pt , cm ,
و غیره تعیین می‌کند . مقدار پیش فرض 0px می‌باشد.
length
حاشیه ی دور عنصر را به میزان درصد پهنای المان دربرگیرنده مشخص می کند / فاصله ی دور
عنصر را بر حسب درصد تعیین شده, برابر با کل عرض یا پهنای المان دربرگیرنده تعیین می‌کند.
%
تعیین می‌کند که حاشیه ی دور عنصر باید از عنصر والد / parent element به ارث برده شود.inherit

تنظیم فاصله از هر ضلع به صورت مجزا

توسط خاصیت های padding-top، padding-left، padding-right و padding-bottom می‌تونیم فواصل محتوا از هر ضلع رو به صورت مجزا مشخص کنیم.

به مثال زیر توجه کنین:

نمونه مثال Padding
نمونه مثال Padding

فواصل کلمه “میزفا” از مرز های div بالا رو می‌تونیم توسط کد پایین به وجود بیاریم:

div{
   padding-left: 20px;
   padding-top: 50px;
}

در کد بالا، فاصله کلمه “میزفا” از حاشیه سمت چپ ۲۰ پیکسل و از حاشیه بالا ۵۰ پیکسل تعیین شده.

تنظیم فاصله محتوا از ضلع ها توسط خاصیت کوتاه شده padding

تو بخش قبل، دیدیم که می‌تونیم برای فاصله از هر ضلع، یک دستور مجزا بنویسیم.

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

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

حالت پیشفرض:

در این حالت، به padding، فقط یک مقدار اختصاص می‌دیم. اون مقدار، محتوا رو از تمامی اضلاع به یک اندازه فاصله می‌ده:

/* --- استفاده از یک خاصیت --- */
div{
   padding: 20px;
}
/* --- استفاده از چند خاصیت --- */
div{
   padding-left: 20px;
   padding-right: 20px;
   padding-top: 20px;
   padding-bottom: 20px;
}

کد های بالا، محتوا رو به اندازه ۲۰ پیکسل از اضلاع عنصر حامل اون فاصله می‌دن.

مقدار دو گانه:

در حالت دوم، به padding، دو مقدار اختصاص می‌دیم.

به ترتیب زیر برای نوشتن مقدار ها توجه کنین:

padding: [فاصله جپ و راست] [فاصله بالا و پایین];

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

/* --- استفاده از یک خاصیت --- */
div{
   padding: 20px 40px;
}
/* --- استفاده از چند خاصیت --- */
div{
   padding-left: 40px;
   padding-right: 40px;
   padding-top: 20px;
   padding-bottom: 20px;
}

با توجه به کد بالا، محتوا از اضلاع بالا و پایین به اندازه ۲۰ پیکسل، و از اضلاع چپ و راست به اندازه ۴۰ پیکسل فاصله خواهد داشت.

مقدار سه گانه:

در حالت سوم، خاصیت padding، سه مقدار قبول می‌کنه.

این سه مقدار، با ترتیب زیر نوشته می‌شن:

padding:[فاصله پایین] [فاصله جپ و راست] [فاصله بالا];

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

/* --- استفاده از یک خاصیت --- */
div{
   padding: 20px 50px 5px;
}
/* --- استفاده از چند خاصیت --- */
div{
   padding-left: 50px;
   padding-right: 50px;
   padding-top: 20px;
   padding-bottom: 5px;
}

کد فوق، فاصله محتوا از ضلع بالا رو ۲۰ پیکسل، ضلع پایین ۵ پیکسل و اضلاع چپ و راست رو ۵۰ پیکسل قرار می‌ده.

مقدار چهار گانه:

در حالت آخر، می‌تونیم تمامی فواصل از اضلاع رو به صورت متفاوت و برای هر چهار سمت وارد کنیم.

ترتیب این حالت به شکل زیر خواهد بود:

padding: [فاصله چپ] [فاصله پایین] [فاصله راست] [فاصله بالا];

به مثال زیر توجه کنین:

/* --- استفاده از یک خاصیت --- */
div{
   padding: 20px 15px 34px 13px;
}
/* --- استفاده از چند خاصیت --- */
div{
   padding-left: 13px;
   padding-right: 15px;
   padding-top: 20px;
   padding-bottom: 34px;
}

توسط کد بالا، فاصله محتوا از ضلع بالا ۲۰ پیکسل، ضلع راست ۱۵ پیکسل، ضلع پایین ۳۴ پیکسل و ضلع چپ ۱۳ پیکسل خواهد بود.

در صورت مبهم بودن مثال ها، حتما سوالتون رو تو قسمت نظرات پایگاه دانش میزفا مطرح کنین، پاسخگو خواهم بود 🙂

پایان ترم

سوال:

برای چه عناصری نمی‌تونیم از خاصیت های padding-top و padding-bottom استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل در در نظرات بگن ۲ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه.

نتیجه گیری

در این مقاله با مفهوم padding آشنا شدیم و یاد گرفتیم که چطور می‌تونیم توسط خاصیت های مربوط به padding، محتوای درون یک عنصر رو، از مرز های همون عنصر فاصله بدیم و به طور کلی کار با padding در CSS را آموختیم.

فهمیدیم که این فاصله دهی می‌تونه به دو شکل “استفاده از خاصیت های مجزا” و “استفاده از تک خاصیت padding” انجام بشه، و در نهایت حالت های مختلف خاصیت کوتاه شده padding رو بررسی کردیم.

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

برچسب ها

نوید معدن نژاد

یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر