جلسه ۱۸ – padding در CSS

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

آشنایی با Padding
آشنایی با 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;
}

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

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

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

فیلم آموزشی asp.net core 2

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

فیلم آموزشی asp.net core 2

8 نظر

8 پاسخ

  1. سلام خیلی بد توضیح دادین فری لرن بهتر از این مقاله است .

    1. سلام امیدوارم خوب باشی
      خوشحال میشم دقیقا بگید کجاها بد نوشته شده تا ویرایش کنیم. همینطور اگر نمونه خوب دارید بفرستید حتما مقاله رو بهینه میکنیم.

  2. سلام
    به عناصر از نوع inline نمی شود
    padding-top , padding-bottom اعمال کرد

  3. سلام
    به عناصر inline نمیتونیم padding-top و padding-bottom (همچنین margin) و width و height اضافه کنیم

  4. برای عناصری با display:inline نمیتونیم padding و width رو برای top و bottom تعیین کنیم و تغییر بدیم

    1. کاملا درسته عرفان عزیز.
      البته در آکادمی میزفا عضو نبودی تا بتونیم امتیاز بدیم.

دیدگاهتان را بنویسید

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

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

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

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

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=