آموزش رایگان CSS- جلسه 9

در جلسه ی هشتم از سری جلسات آموزش CSS با مفهوم Margin آشنا شدیم. در این جلسه قصد داریم با مفهوم Padding در CSS آشنا شویم و ببینیم که این ویژگی را چگونه میتوان روی عناصر موجود اعمال کرد و چه خاصیتی دارد. با ما همراه باشید.

Padding در CSS

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

با استفاده از ویژگی padding می توانیم فاصله داخلی عناصر مورد نظر را در چهار جهت اصلی تعیین کنیم. در واقع میتوان برای ویژگی های زیر مقادیری مشخص کرد؛

1.  padding-top
2.  padding-right
3.  padding-bottom
4.  padding-left

ویژگی های بالا چه مقدارهایی میتوانند اختیار کنند؟

برای ویژگی های بالا می توان مقادیر عددی زیر را تعریف کرد؛

مثال length

<style>
div
{
Padding-top: 20px ;
Padding-right:30px ;
Padding-bottom: 10px;
Padding-left:10px;
}
</style>

مثال درصد

<style>
div {padding: 30% 10% 25% 15%;}
div
{
Padding-top: 30%;
Padding-right: 10%;
Padding-bottom: 25%;
Padding-left: 15%;
}

</style>

مثال inherit

<style>
body{
padding-top:10px;
padding-right:20px;
padding-bottom:15px;
padding-left:10px;
}
h2#test{
border:2px solid black;
padding: inherit;
}
</style>

خلاصه نویسی ویژگی padding

خلاصه نویسی کدهای CSS هم باعث سرعت در کدنویسی می شود و هم خوانایی کدها را ساده تر می کند پس بهتر است نوشتن کدها را کوتاه کنیم.

padding: top right bottom left;

مقادیر ویژگی padding

padding ها میتوانند در چهار حالت مقدار عددی بگیرند که در ادامه مفهوم هر کدام را برای شما شرح خواهیم داد.

حالت اول

زمانی که padding ما چهار عدد دارد .مقادیر تعیین شده در جهت عقربه های ساعت اعمال میشوند. یعنی
اولین مقدار برای سمت بالا و آخرین مقدار برای سمت چپ خواهد بود.

padding: top right bottom left;

مثال؛

padding: 10px 20px 10px 0;

حالت دوم

حالت دوم برای زمانی است که سه مقدار وجود دارد که مقدار اول تعیین کننده ی بالا, مقدار دوم برای سمت راست و
چپ و مقدار سوم برای پایین می باشد؛

padding: top left/right bottom;
padding: 10px 10px 20px;

حالت سوم

در این حالت فقط دو مقدار وجود دارد که مقدار اول تعیین کننده ی جهت های بالا و پایین و مقدار دوم برای سمت راست و چپ است.

padding: top/bottom left/right;
padding: 10px 30px;

حالت چهارم

در این حالت فقط یک مقدار وجود دارد که تعیین کننده ی همه ی جهت ها می باشد. یعنی تمامی جهت ها با یک فاصله padding دریافت می کنند.

padding: top/bottom/left/right;
padding: 10px;

چند مثال از padding

مثال 1

<style>
h4 {
background-color: lime;
padding: 20px 50px;
}
</style>

مثال 2

<style>
h3 {
background-color: cyan;
padding: 1em 50px 110px 110px;
}
</style>

مثال 3

<style>
div{
padding: 5%;
}
P{
padding:20px;
padding-left: inherit;
}
</style>

تگ p درون تگ div قرار دارد.

مثال 4

<style>
p{
padding: 10px;
padding-top: initial;
}
</style>

مثال 5

<style>
.test{
padding: 10px 3% 20px;
}
</style>

😊✌از بقیه ی جلسات آموزش CSS جا نمونید.✌😊