آموزش کار با ویژگی Padding در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Padding در CSS با من همراه باشید.

آموزش کار با ویژگی Padding در CSS

Free-Learn

کار با ویژگی Padding در CSS

ویژگی بالشت یا بالشتک یا Padding ویژگی است که با استفاده از آن میتوان یک فضای خالی ( فاصله ) را از داخل یک عنصر ایجاد کرد، در واقع میتونیم بگیم این فضا یک فضای درونی است.

جلسه قبل با ویژگی Margin آشنا شدیم و دیدیم که این ویژگی یک فضای خالی را بصورت بیرونی ایجاد میکند حال ویژگی Padding یک فضای درونی ایجاد خواهد کرد.

در CSS هر عنصر دارای ۴ جهت کلی است که این جهات به شرح زیر می باشد :

  • Top – جهت بالا
  • Right – جهت راست
  • Bottom – جهت پایین
  • Left – جهت چپ

پس ما میتونیم برای هر یک از این جهات پدینگ (Padding) تعریف کنیم و یا حتی میتونیم برای مثلا جهت راست و چپ تعریف کنیم و برای جهت بالا و پایین تعریف نکنیم.

ویژگی پدینگ یا Padding در CSS میتونه مقادیر زیر رو داشته باشه :

  • length – با استفاده از واحدهای اندازه گیری مثله پیکسل،پوینت
  • % – مقدار فاصله بصورت درصدی مشخص می شود
  • inherit – مقدارش را از عنصر والدش یا پدرش به ارث می برد

مثال شماره ۱ : استفاده از واحدهای اندازه گیری همچون px,pt,in,cm و..

امتحان کنید

مثال شماره ۲ : استفاده از حالت درصدی (%)

امتحان کنید

مثال شماره ۳ : استفاده از حالت ارث بری

امتحان کنید

Free-Learn

خلاصه نویسی ویژگی Padding در CSS

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

شکل کلی خلاصه نویسی ویژگی Padding بصورت زیر می باشد :

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

مثال شماره ۱ : استفاده از ۴ جهت

امتحان کنید

مثال شماره ۲ : استفاده از فقط راست و چپ

امتحان کنید

مثال شماره ۳ : استفاده از ۴ جهت با استفاده از یک مقدار

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب