جلسه ۱۸ – padding در CSS

ویژگی 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: فاصله محتوا از مرز سمت بالا

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

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

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

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

فواصل کلمه “میزفا” از مرز های 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 رو بررسی کردیم.

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

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