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

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

با استفاده از ویژگی padding می توانیم فاصله داخلی عناصر مورد نظر را در چهار جهت اصلی تعیین کنیم. در واقع میتوان برای ویژگی های زیر مقادیری مشخص کرد؛
- padding-top
- padding-right
- padding-bottom
- padding-left
ویژگی های بالا چه مقدارهایی میتوانند اختیار کنند؟
برای ویژگی های بالا می توان مقادیر عددی زیر را تعریف کرد؛
مقدار length ( مقدار عددی ) |
برای مقداردهی به این روش باید یکی از مقادیر rem و px و cm را در هر چهار جهت در نظر بگیریم. |
مقدار % ( مقدار درصدی ) |
در این حالت کافی است عدد مورد نظر را با علامت درصد تعیین کنیم. |
مقدار initial |
اگر خاصیت padding را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت اعمال می شود. |
مقدار inherit |
و در آخر اگر این خصوصیت را برای عنصر خود در نظر بگیریم از مقدار تعیین شده برای والد خود پیروی می کند و همان مقدار را اعمال خواهد کرد. |
مثال 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 جا نمونید.✌😊
About حامد نجفی
بعد از گذشت 9 سال کار با وردپرس و فعالیت اینترنتی هر روز علاقه ام به این کار بیشتر میشه. سختی های زیادی تو این راه کشیدم و دوست دارم به شما کمک کنم این مسیر رو سریعتر طی کنین. با من در شبکه های اجتماعی در تماس باشید :)
More Posts by حامد نجفی2 Comments
Join the discussion and tell us your opinion.
سلام
میشه همزمان به یک المان هم padding داد هم margin?
بله میشه