این آموزش در تاریخ ۱۴۰۰/۱۰/۰۳ آپدیت شده است.
آموزش کار با ویژگی Padding در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ویژگی Padding در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ویژگی Padding در CSS
ویژگی بالشتک یا Padding ویژگی است که با استفاده از آن میتوان یک فضای خالی ( فاصله ) را در داخل یک عنصر ایجاد کرد، در واقع میتونیم بگیم این فضا یک فضای درونی است.
- ویژگی Margin یک فضای خالی در قسمت بیرونی تگ ایجاد میکنه
- ویژگی Padding یک فضای خالی در قسمت داخلی تگ ایجاد میکنه
ویژگی Padding در CSS دارای ۴ جهت می باشد :
- Padding-Top : جهت بالا
- Padding-Right : جهت راست
- Padding-Bottom : جهت پایین
- Padding-Left : جهت چپ
Free-Learn
مثال از Padding در CSS
مثال شماره ۱ : ایجاد Padding در ۴ طرف تگ بصورت مجزا ( یعنی بالا – راست – پایین و چپ )
|
1 2 3 4 5 6 |
.mytext{ padding-top:10px; padding-right:30px; padding-bottom:10px; padding-left:30px; } |
Free-Learn
خلاصه نویسی Padding در CSS
شکل کلی خلاصه نویسی ویژگی Padding بصورت زیر می باشد :
|
1 |
padding: top right bottom left; |
مثال شماره ۱ : استفاده از ۴ مقدار مجزا برای ۴ جهت
- بالا ۳۰ پیکسل
- راست ۵۰ پیکسل
- پایین ۳۰ پیکسل
- چپ ۵۰ پیکسل
|
1 2 3 |
.mytext{ padding:30px 50px 30px 50px; } |
مثال شماره ۲ : فقط راست و چپ
- بالا نداره
- راست ۴۰ پیکسل
- پایین نداره
- چپ ۱۰۰ پیکسل
|
1 2 3 |
.mytext{ padding:0 40px 0 100px; } |
مثال شماره ۳ : استفاده از ۱ مقدار برای ۴ طرف ( یعنی در مثال زیر ۵۰ پیکسل برای ۴ طرف اعمال میشه )
- بالا ۵۰ پیکسل
- راست ۵۰ پیکسل
- پایین ۵۰ پیکسل
- چپ ۵۰ پیکسل
|
1 2 3 |
.mytext{ padding:50px; } |
