ورود ثبت نام
خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی
» طراحی سایت » آموزش CSS » خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی
14731 بازدید

خاصیت Padding و Margin در فیلم آموزش CSS به زبان فارسی

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

قبل از شروع آموزش باید بگم که از margin و padding در استایل دهی به فرم ها و اسکلت بندی صفحات وب کاربرد زیادی دارد و باید نحوه استفاده از آن را یاد بگیرید .

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 برا فاصله از داخل عنصر است.

فیلم آموزش خاصیت Padding و Margin را می توانید از لینک زیر دانلود کنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. سلام.خسته نباشید گفت:

    ویدیو آموزش css قسمت 3 و12 , 18 نیست