آموزش ویژگی padding در CSS

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

آموزش ویژگی padding در CSS

Free-Learn

ویژگی padding در CSS

با استفاده از ویژگی padding در CSS میتوان یک فضای خالی را بین دیواره یک عنصر و محتوای داخل همان عنصر مشخص و یا تعریف کرد، و بطور کلی تر از این ویژگی برای خلاصه نویسی ویژگی های زیر مورد استفاده قرار میگیرد :

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

تفاوت ویژگی های Padding و Margin : ویژگی Padding یک فضای خالی را در داخل یک عنصر ایجاد میکند ولی ویژگی Margin فضای خالی را در بیرون از عنصر ایجاد میکند.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی padding را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از واحد پیکسل ( px ) و درصد ( % )

امتحان کنید

مثال شماره ۲ : استفاده از Padding در ۴ جهت مجزای عنصر ( مقدار اول برای جهت بالا ، مقدار دوم برای جهت راست ، مقدار سوم برای جهت پایین و مقدار چهارم برای جهت چپ )

امتحان کنید

مثال شماره ۳ : مقدار دادن فقط جهت بالا و پایین

امتحان کنید

Free-Learn

جدول مشخصات ویژگی padding در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض ۰
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS1
نحوه استفاده در جاوااسکریپت object.style.padding=”2px 4px 6px 8px”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی padding در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
padding ۱٫۰ ۱٫۰ ۳٫۵ ۱٫۰ ۴٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی padding در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
length استفاده از واحدهای اندازه گیری px,em,% و..
( آموزش واحدهای اندازه گیری در CSS )
( مقدار پیش فرض ۰ )
( مقادیر منفی مجاز نمی باشند )
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

  • اگر از ۱ مقدار درون این ویژگی استفاده نمایید :

یعنی ۲ پیکسل برای تمامی جهت های عنصر ( بالا – راست – پایین و چپ )

  • اگر از ۲ مقدار درون این ویژگی استفاده نمایید :

یعنی ۲ پیکسل برای سمت بالا و پایین و ۳ پیکسل برای سمت راست و چپ

  • اگر از ۳ مقدار درون این ویژگی استفاده نمایید :

یعنی ۲ پیکسل برای سمت بالا ، ۳ پیکسل برای سمت راست و چپ و ۴ پیکسل برای سمت پایین

  • اگر از ۴ مقدار درون این ویژگی استفاده نمایید :

یعنی ۲ پیکسل برای سمت بالا ، ۳ پیکسل برای سمت راست ، ۴ پیکسل برای سمت پایین و ۵ پیکسل برای سمت چپ

Free-Learn

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