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

[Mohlek]

سایت آموزشی فری لرن
خانه آموزش CSS آموزش CSS مقدماتی
آموزش CSSآموزش CSS مقدماتی
آموزش کار با ویژگی Padding در CSS
توسط صادق اسدی - ۱۳۹۸-۰۶-۲۴
مرتبط با این آموزشآموزش های بیشتر

آموزش CSS مقدماتی
آموزش نحوه اولویت بندی عناصر در CSS

آموزش CSS مقدماتی
آموزش کامل واحدهای اندازه گیری در CSS

آموزش CSS مقدماتی
آموزش کار با منوها یا Navigation Bar در CSS

آموزش CSS مقدماتی
آموزش کامل Image Sprites در CSS

آموزش CSS مقدماتی
آموزش کامل ترازبندی متن ها در CSS + انواع ترفند
آموزش کار با ویژگی 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 و..


<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:30px;
padding-right:10px;
padding-bottom:30px;
padding-left:10px;
}

</style>