آموزش css - قسمت هشتم(padding)

عضویت در سایت

نام کاربری*

ایمیل*

رمزعبور*

تایید رمز عبور*

نام*

نام خانوادگی*

نام نمایشی*

تصویر پروفایل*

مرور

کشور*

شهر*

جنسیت* آقا

خانم

سایر

سن*

قوانین و مقررات* با تیک زدن این گزینه شما قوانین و مقررات را میپذیرید.

عضویت در سایت

رایگان ثبت نام کنید و سوالات خود را بپرسید، همچنین میتوانید در پاسخگویی به سوالات دیگر کاربران نیز سهیم باشید، هر مشکلی در ثبت نام یا ورود داشتید با ایمیل beporsam@gmail.com در ارتباط باشید

آموزش css – قسمت هشتم(padding)

سلام

با هشتمین قسمت از آموزش های CSS در خدمتتون هستیم، در جلسه قبل پرداختیم به مبحث margin حال در این جلسه می پردازیم به مبحث padding، این دو خاصیت یعنی margin و padding دو خاصیت مهم Css هستند، در ادامه همراه بپرسم باشید تا با این خاصیت بیشتر آشنا شوید.

آموزش:

از padding برای تعیین اندازه خالی اطراف عنصر(تگ) استفاده می شود، توسط padding می توانیم فضالی خالی بالا، راست، چپ و راست یک عنصر نسبت به دیگر عنصرها را تعیین نمود.

خواص padding

خواصی که padding میگیرد برای تعیین فاصله ی خالی اطراف عناصر:

margin-right
margin-top
margin-left
margin-bottom

در زیر مثال از padding را برایتان آوردیم:

<html>
<head>
<style>
div {
    padding-top: 100px;
    padding-bottom: 100px;
    padding-right: 150px;
    padding-left: 80px;
    background-color: lightblue;
    text-align:center;
}
</style>
</head>
<body>

<div>بپرسم، مکانی برای آموزش و رفع مشکلات</div>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

<html>

<head>

<style>

div {

padding-top: ۱۰۰px;

padding-bottom: ۱۰۰px;

padding-right: ۱۵۰px;

padding-left: ۸۰px;

background-color: lightblue;

text-align:center;

}

</style>

</head>

<body>

<div>بپرسم، مکانی برای آموزش و رفع مشکلات</div>

</body>

</html>

در کدهای بالا به جای padding خصوصیت margin را بنویسید و خروجی را نگاه کنید، تا فرق بین دو خاصیت padding و margin را درک کنید.

همانطور که در کدهای بالا مشاهده کردید، padding-right, padding-left, padding-bottom, padding-top به تگ div دادیم، و فضای داخل تگ div از چهار طرف با توجه به مقادیری که دادیم فاضله گرفته است.

خلاصه نویسی در padding

مطلب پیشنهادی: آموزش کتاب پیشرفته – جلسه ی پانزدهم ( آخر ) (اکتیویتی type_laptop)

در padding هم مثل خصوصیت هایی مثل border می توانیم تمام خاصیت های padding-left, padding-right, padding-top, padding-bottom را در یک خط و همه آن ها را به خصوصیت margin بدیم، به مثال زیر توجه کنید:

<html>
<head>
<style>
div {
    padding: 100px 150px 100px 80px;
    background-color: lightblue;
    text-align:center;
}
</style>
</head>
<body>

<div>بپرسم، مکانی برای آموزش و رفع مشکلات</div>

</body>
</html>

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

<html>

<head>

<style>

div {

padding: ۱۰۰px ۱۵۰px ۱۰۰px ۸۰px;

background-color: lightblue;

text-align:center;

}

</style>

</head>

<body>

<div>بپرسم، مکانی برای آموزش و رفع مشکلات</div>

</body>

</html>

این مثال همان مثال قبلی است، با این تفاوت که خلاصه نویسی کردیم.

نکته: نیاز نیست که تمام خصوصیت ها را مقدار دهی کنیم، بلکه با توجه به نیاز می توانیم مقدار هر خاصیت را که نیاز داشته باشیم بدیم.

خصوصیت padding می تواند از یک تا چهار مقدار بگیرد:

۱٫ خصوصیت padding با ۴ مقدار:

padding: 25px 50px 75px 100px

از سمت بالا ۲۵px

از سمت راست ۵۰px

از سمت پایین ۷۵px

از سمت چپ ۱۰۰px

۲٫ خصوصیت padding با سه مقدار:

padding: 25px 50px 75px

از سمت بالا ۲۵px

از سمت راست و چپ ۵۰px

از سمت پایین ۷۵px

۳٫ خصوصیت padding با دو مقدار:

padding: 25px 50px

از سمت بالا و پایین ۲۵px

مطلب پیشنهادی: جا به جایی بین صفحات به شکل انیمیشنی در b4a

از سمت راست و چپ ۵۰px

۴٫ خصوصیت padding با یک مقدار:

padding: 25px

از چهار طرف، ۲۵px

توجه: به جای px نیز میتوانید از % و cm استفاده کنید(یک مثال حل کنید تا متوجه تفاوت px, %, cm شوید).

خصوصیت های padding

در جدول زیر تمام خصوصیات padding را به همراه مثال و توضیح آورده ایم:

خصوصیت	توضیح	مثال
padding	مقدار دهی تمام جهات(راست،چپ،بالا،پایین)	padding: 25px 75px 65px 10px
padding-right	فاصله سمت راست را تعیین میکند	padding-right: 10px
padding-left	فاصله سمت چپ را تعیین میکند	padding-left: 30px
padding-top	فاصله سمت بالا را تعیین میکند	padding-top: 55px
padding-bottom	فاصله سمت پایین را تعیین میکند	padding-bottom: 71px

آموزش padding در css نیز به پایان رسید، همراه ما باشید با دیگر آموزش ها …

هرگونه سوالی یا مشکلی در رابطه با مطلب فوق داشتید؛ در سایت بپرسید، پاسخگوی سوالات شما هستیم، برای پرسیدن سوال کلیک کنید.

موفق باشید.