در جلسه قبل ID و Class رو گفتم و در این قسمت از فیلم آموزش CSS خاصیت یا ویژگی Padding و Margin در CSS را برای شما آموزش خواهم داد که یکی از مهم ترین ویژگی ها در CSS می باشند .
قبل از شروع آموزش باید بگم که از margin و padding در استایل دهی به فرم ها و اسکلت بندی صفحات وب کاربرد زیادی دارد و باید نحوه استفاده از آن را یاد بگیرید .
margin و padding
ویژگی Margin در CSS :
margin ( مارجین ) به معنی حاشیه است و برای تنظیم حاشیه ها کاربرد دارد ، اگر شما همانند فیلم بالا دو تا عنصر داشته باشید که به هم چسبیده باشند و بخواهید به آن ها فاصله بدهید اول باید یک ID یا Class در HTML تعریف کند و بعد در CSS به آن استایل دهید .
مقدار margin را می توانید با پیکسل ( picture element ) تعیین کنید که مرسوم ترین مقدار است .
مقدار margin را می توانید به صورت درصد تعیین کنید مثلاً %20 ، %40
مقدار margin را می توانید به صورت Points تعیین کنید مثلاً 3pt ، 7pt و…. ( هر pt برابر 1.72 اینچ است ) .
با استفاده از margin در CSS می توان به هر کدام از آن ها از قسمت حاشیه فاصله داد . مانند کد زیر :
کد HTML :
<!doctype html> <html> <head> <title>Web30ty.com</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div class="box"> Hello </div> <div class="box"> World </div> </body> </html>
کد CSS :
.box{
width: 500px;
height: 500px;
background: red;
margin: 20px;
}
اگر margin یک مقدار داشته باشد این یعنی از همه جهات ( بالا ، راست ، پایین ، چپ ) این مقدار به اون عنصر اعمال شود .
.box{
margin: auto;
}
اگر مقدار margin را برابر auto در نظر بگیرید به صورت پیش فرض مرورگر فاصله از جهات بالا ، راست ، پایین ، چپ را برای عنصر در نظر می گیرد .
ولی شما می توانید فقط به یک جهت از عنصر هم margin بدهید مثلاً می توانید بگویید عنصر قثز از بالا فاصله بگیرد برای این کار از margin-top استفاده می کنیم مانند کد زیر :
.box{
width: 500px;
height: 500px;
background: red;
margin-top: 20px;
}
اگر بخواهید فقط از سمت راست فاصله بدهید باید از margin-right استفاده کنید و ویا اگر می خواهید از سمت چپ فاصله بدهید از margin-left و برای قاصله از پایین از margin-bottom استفاده کنید همانند سورس کد زیر :
.box{
margin-top: 20px;
margin-right: 30px;
margin-bottom: 10px;
margin-left: 40px;
}
اما به جای این که از جهت های بالا ، راست ، پایین ، چپ استفاده کنیم می توانیم به صورت یکجا و مختصر به همه اون جهات مقدار بدهیم مانند کد زیر :
.box{
margin: 20px 30px 10px 5px;
}
مقادیر margin در کد بالا به ترتیب نشانگر جهات بالا ( top ) راست ( right ) پایین ( bottom ) چپ ( left ) است .
ویژگی Padding در CSS
padding به معنی لایه است و Padding فاصله از داخل بلاک را مشخص می کند مثلاً اگر بخواهید مطالب داخل یک عنصر از کناره به میزان 5 پیکسل فاصله داشته باشند کافیست برای آن یک padding بنویسید و مقدار دهید مانند کد زیر :
.box{
width: 500px;
height: 500px;
background: red;
padding: 5px;
}
نحوه مقدار دهی Padding هم شبیه margin است و همه نکاتی که در بالا گفتم برای padding هم کاربرد دارد .
تفاوت margin و padding
همان طور که در تا حالا فهمیدید تفاوت margin و padding در اینه که margin برای فاصله از خارج عنصر هستش و padding برا فاصله از داخل عنصر است.
ویدیو آموزش css قسمت 3 و12 , 18 نیست
سلام وقتتون بخیر
بررسی کردم هیچ مشکلی وجود نداره .