ویژگی padding در CSS
ویژگی padding (لایه)، فضای خالی لبه ی داخلی المان را مشخص می کند. این فضای خالی، لبه داخلی حاشیه (border) است.
padding: 50px;
نکته: ویژگی margin، فضای خالی در لبه ی خارجی حاشیه (border) ایجاد می کند.
نکته: ویژگی padding، فضای خالی در لبه ی داخلی حاشیه (border) ایجاد می کند.
تفاوت padding و margin در CSS
ویژگی padding و margin هر دو فضای خالی اطراف المان ایجاد می کنند.
- ویژگی padding در فضای داخلی حاشیه (border)
- ویژگی margin در فضای خارجی حاشیه (border)
padding: 80px;
border: solid 1px red;
margin: 30px;
background: green;
نکته: همانطور که در نمونه کد بالا می بینید، ویژگی padding به رنگ سبز نمایش داده می شود. در واقع چون ویژگی padding، فضای داخل المان است، ویژگی هایی مانند رنگ پس زمینه ی همان المان را در خود نمایش می دهد.
نکته: همانطور که در نمونه کد بالا می بینید، ویژگی margin، به رنگ پس زمینه ی تگ والد خود نمایش داده می شود. در واقع چون ویژگی margin، فضای خارج المان است، ویژگی هایی مانند رنگ پس زمینه ی المان والد خود را نمایش می دهد. برای درک بهتر اینجا کلیک کنید.
جهت های padding در CSS
padding: 50px;
ویژگی padding، در نمونه کد بالا، خلاصه ی چهار ویژگی است.
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
خلاصه نویسی padding با یک مقدار
ویژگی padding را می توان به چند صورت خلاصه نویسی کرد.
ویژگی padding با یک مقدار:
padding: 50px;
- در چهار جهت به صورت یکسان اعمال می شود.
خلاصه نویسی padding با دو مقدار
ویژگی padding با دو مقدار:
padding: y x;
- مقدار اول در جهت بالا و پایین (محور y)
- مقدار دوم در جهت راست و چپ (محور x)
padding: 100px 200px;
خلاصه نویسی padding با سه مقدار
ویژگی padding با سه مقدار:
padding: top x bottom;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست و چپ (محور x)
- مقدار سوم در جهت پایین
padding: 100px 200px 300px;
خلاصه نویسی padding با چهار مقدار
ویژگی padding با چهار مقدار:
padding: top right bottom left;
- مقدار اول در جهت بالا
- مقدار دوم در جهت راست
- مقدار سوم در جهت پایین
- مقدار چهارم در جهت چپ
padding: 100px 50px 40px 30px;
خلاصه درس
در این درس با ویژگی padding در CSS:
- انواع مقداردهی
- خلاصه نویسی آن با مقدار های مختلف
آشنا شدیم.