آموزش padding در CSS | آموزش کامل + نمونه کد

قبلی بعدی

ویژگی padding در CSS

ویژگی padding (لایه)، فضای خالی لبه ی داخلی المان را مشخص می کند. این فضای خالی، لبه داخلی حاشیه (border) است.

این تگ از بالا، راست، پایین، چپ 50 پیکسل padding دارد.

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, border, margin, background است.

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

نکته: همانطور که در نمونه کد بالا می بینید، ویژگی margin، به رنگ پس زمینه ی تگ والد خود نمایش داده می شود. در واقع چون ویژگی margin، فضای خارج المان است، ویژگی هایی مانند رنگ پس زمینه ی المان والد خود را نمایش می دهد. برای درک بهتر اینجا کلیک کنید.

جهت های padding در CSS

padding: 50px;

ویژگی padding، در نمونه کد بالا، خلاصه ی چهار ویژگی است.

padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;

خلاصه نویسی padding با یک مقدار در CSS

ویژگی padding را می توان به چند صورت خلاصه نویسی کرد.

ویژگی padding با یک مقدار:

padding: 50px;

در چهار جهت به صورت یکسان اعمال می شود.

خلاصه نویسی padding با دو مقدار در CSS

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

padding: y x;

مقدار اول در جهت بالا و پایین (محور y)
مقدار دوم در جهت راست و چپ (محور x)

padding: 100px 200px;

خلاصه نویسی padding با سه مقدار در CSS

ویژگی padding با سه مقدار:

padding: top x bottom;

مقدار اول در جهت بالا
مقدار دوم در جهت راست و چپ (محور x)
مقدار سوم در جهت پایین

padding: 100px 200px 300px;

خلاصه نویسی padding با چهار مقدار در CSS

ویژگی padding با چهار مقدار:

padding: top right bottom left;

مقدار اول در جهت بالا
مقدار دوم در جهت راست
مقدار سوم در جهت پایین
مقدار چهارم در جهت چپ

padding: 100px 50px 40px 30px;

خلاصه درس

در این درس با ویژگی padding در CSS:

انواع مقداردهی
خلاصه نویسی آن با مقدار های مختلف

آشنا شدیم.

قبلی بعدی

توسعه دهندگان

احسان اسلامی