آموزش کار با ویژگی 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 و..
|
1 2 3 4 5 6 7 8 9 10 |
<style> div.test{ padding-top:30px; padding-right:10px; padding-bottom:30px; padding-left:10px; } </style> |
مثال شماره ۲ : استفاده از حالت درصدی (%)
|
1 2 3 4 5 6 7 8 9 10 |
<style> div.test{ padding-top:5%; padding-right:3%; padding-bottom:5%; padding-left:3%; } </style> |
مثال شماره ۳ : استفاده از حالت ارث بری
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div.pedar{ padding-top:20px; padding-right:10px; padding-bottom:20px; padding-left:10px; } div.farzand{ padding-top:inherit; padding-bottom:inherit; } </style> |
Free-Learn
خلاصه نویسی ویژگی Padding در CSS
با استفاده از حالت خلاصه نویسی یک ویژگی میتونیم هم سرعت کدنویسی مون رو ببریم بالا و هم خوانایی کدهارو، پس پیشنهاد من اینه همیشه از حالت خلاصه نویسی استفاده کنید.
شکل کلی خلاصه نویسی ویژگی Padding بصورت زیر می باشد :
|
1 |
padding: top right bottom left; |
یعنی از بالا راست پایین چپ میتونیم فاصله رو با استفاده از حالت های بالا مشخص کنیم.
مثال شماره ۱ : استفاده از ۴ جهت
|
1 2 3 4 5 6 7 |
<style> div.test{ padding: 40px 20px 40px 20px; } </style> |
مثال شماره ۲ : استفاده از فقط راست و چپ
|
1 2 3 4 5 6 7 |
<style> div.test{ padding: 0 20px 0 60px; } </style> |
مثال شماره ۳ : استفاده از ۴ جهت با استفاده از یک مقدار
|
1 2 3 4 5 6 7 |
<style> div.test{ padding: 50px; } </style> |
