تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
۰۹۱۲۰۱۹۹۳۸۶   ۰۲۱۸۸۴۷۱۵۲۱

آموزش CSS – بخش سوم

آموزش css

در قسمت سوم از آموزش CSS حاشیه گذاری را بررسی می‌کنیم. برای هر جزء می‌توانیم حاشیه‌ای را قرار دهیم و این حاشیه‌ها را همان‌طور که می‌خواهیم تغییر دهیم. پراپرتی های حاشیه گذاری و مقادیرشان را در این قسمت با مثال‌های گوناگون بررسی می‌کنیم.

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

در ادامه آموزش‌ها CSS ها ی طولانی را به روش external اعمال می‌کنیم و کدهای CSS و HTML را جداگانه می‌نویسیم. بدیهی است که دستورات CSS را در فایل style.css و کدهای HTML را در index.html باید اعمال کنید.

یادآوری : درروش external کدها را در فایلی جداگانه نوشته و با پسوند .css ذخیره می‌کنیم و از طریق تگ link فایل style.css را به فایل index.html متصل می‌کنیم.

نحوه حاشیه گذاری و انواع آن

در مثال‌هایی که در آموزش‌ها باهم بررسی کردیم، با پراپرتی border آشنا شدیم. با استفاده از این پراپرتی می‌توان برای هر جزئی یک حاشیه قرارداد. حاشیه‌هایی که تاکنون رسم کرده‌ایم، به‌صورت خطی پیوسته بوده‌اند. حاشیه می‌تواند به چندین صورت مختلف اعمال شود. می‌توان در بالا، پایین، چپ و یا سمت راست یک جزء حاشیه قرارداد. اما چگونه؟

در این قسمت قصد داریم به‌طور کامل حاشیه گذاری و انواع آن را بررسی کنیم و تمام پراپرتی های دسته border را یاد بگیریم. پس تا انتها مطالب را با دقت مطالعه کنید.

Border Style

گفتیم که حاشیه می‌تواند به‌صورت نقطه‌چین، خطی پیوسته و یا خط چین باشد. نوع حاشیه را با پراپرتی border-style تعیین می‌کنیم. مقادیری که این پراپرتی می‌گیرد، حالات مختلف حاشیه است که عبارتند از موارد زیر:

  • dotted: برای حاشیه نقطه‌چین
  • dashed: برای حاشیه خط چین
  • solid: که با آن آشنا هستید و برای حاشیه‌ای که خطی پیوسته باشد.
  • double: برای حاشیه دوخطی. ( یک را به دو خط تبدیل می‌کند )
  • groove: برای حاشیه ۳D که حاشیه‌ای گود را اطراف جزء قرار می‌دهد.
  • ridge: این حاشیه نیز سه‌بعدی است و حاشیه‌ای برآمده را ایجاد می‌کند.
  • inset: برای ایجاد سایه در قسمت بالا و پشت حاشیه به کار می‌رود و ۳ بعدی است.
  • outset: سایه را در قسمت پایین و پشت حاشیه ایجاد می‌کند و در دسته ۳D قرار می‌گیرد.
  • none: حاشیه را حذف می‌کند.
  • hidden: حاشیه ایجاد می‌کند ولی این حاشیه نمایش داده نمی‌شود.

توجه کنید که حاشیه‌های groove، ridge، inset و outset را حاشیه‌های ۳D میگوییم چون حالتی سه‌بعدی را به حاشیه می‌دهند.

این مقادیر حاشیه را می‌توان باهم ترکیب کرد و برای یک جزء حاشیه‌ای ترکیبی قرارداد. یعنی می‌توان مثلا حاشیه بالا را solid و حاشیه پایین را dotted و حاشیه راست را double و حاشیه چپ را dashed قرارداد. در این صورت پراپرتی border-style چهار مقدار می‌گیرد که ترتیب این  مقادیر به این صورت است: مقدار اول حاشیه بالا، مقدار دوم حاشیه راست، مقدار سوم حاشیه پایین و مقدار چهارم حاشیه چپ را تعیین می‌کند. در مثال زیر این پراپرتی و مقادیر آن را تعیین می‌کنیم.

دستورات css

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.dotted {
		border-style: dotted;
	}
	p.dashed {
		border-style: dashed;
	}
	p.solid {
		border-style: solid;
	}
	p.double {
		border-style: double;
	}
	p.groove {
		border-style: groove;
	}
	p.ridge {
		border-style: ridge;
	}
	p.inset {
		border-style: inset;
	}
	p.outset {
		border-style: outset;
	}
	p.none {
		border-style: none;
	}
	p.hidden {
		border-style: hidden;
	}
	p.mixed {
		border-style: solid double dashed dotted;
	}

دستورات HTML
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="dotted"> حاشیه این پاراگراف dotted است </p>
 <p class="dashed"> حاشیه این پاراگراف dashed است </p>
 <p class="solid"> حاشیه این پاراگراف solid است </p>
 <p class="double"> حاشیه این پاراگراف double است </p>
 <p class="groove"> حاشیه این پاراگراف groove است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="ridge"> حاشیه این پاراگراف ridge است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="inset"> حاشیه این پاراگراف inset است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="outset"> حاشیه این پاراگراف outset است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="none"> حاشیه این پاراگراف none است. حاشیه ندارد. </p>
 <p class="hidden"> حاشیه این پاراگراف hidden است. حاشیه دارد ولی پنهان است </p>
 <p class="mixed"> حاشیه این پاراگراف ترکیبی از dotted و dashed و solid و double  است </p>
</body>
</html>
[us_single_image image=”10804″ align=”center”]

خب اکنون‌که حاشیه گذاری را یا گرفتیم در ادامه به این حاشیه‌ای که قرار داده‌ایم، تغییرات دلخواهمان را ایجاد می‌کنیم. توجه کنید تا زمانی که حاشیه را قرار ندهید، هیچ‌کدام از پراپرتی های زیر تاثیری نخواهند داشت!!!!!

تنظیمات پهنای حاشیه‌ها

پهنای هر حاشیه را می‌توان با پراپرتی border-width تنظیم کرد. مقادیری که برای تنظیمات حاشیه به این پراپرتی می‌دهیم متواند به صورت‌های زیر باشد:

  • یکی از سه مقدار thin برای حاشیه نازک ، medium برای پهنای متوسط حاشیه و thick برای پهنای زیاد.
  • تنظیم پهنا با دادن مقدار عددی با واحدهای px ( پیکسل ) ، pt ( point یعنی نقطه ) ، cm ( سانتی‌متر ) و em ( که اندازه دیفالت خود مرورگر است. )

همان‌طور که می‌توان هر ۴ قسمت حاشیه را به‌دلخواه تعیین کرد، پهنای هر ۴ طرف حاشیه را نیز می‌توان تغییر داد. که در این صورت پراپرتی border-width چهار مقدار را می‌گیرد که ترتیب آن‌ها به‌صورت بالا، راست، پایین و چپ است. ( این ترتیب را در ذهن داشته باشید. )

در مثال زیر انواع مقداردهی را باهم می‌بینیم:

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.dotted {
		border-style: dotted;
		border-width: 0.2em;
	}
	p.dashed {
		border-style: dashed;
		border-width: 0.03cm;
	}
	p.solid {
		border-style: solid;
		border-width: 4px;
	}
	p.double {
		border-style: double;
		border-width: 7px;
	}
	p.groove {
		border-style: groove;
		border-width: 5pt;
	}
	p.ridge {
		border-style: ridge;
		border-width: medium;
	}
	p.inset {
		border-style: inset;
		border-width: thin;
	}
	p.outset {
		border-style: outset;
		border-width: thick;
	}
	p.mixed {
		border-style: solid double dashed dotted;
		border-width: 4px 7px 0.03cm 0.2em;
	}

در index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="dotted"> حاشیه این پاراگراف dotted است </p>
 <p class="dashed"> حاشیه این پاراگراف dashed است </p>
 <p class="solid"> حاشیه این پاراگراف solid است </p>
 <p class="double"> حاشیه این پاراگراف double است </p>
 <p class="groove"> حاشیه این پاراگراف groove است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="ridge"> حاشیه این پاراگراف ridge است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="inset"> حاشیه این پاراگراف inset است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="outset"> حاشیه این پاراگراف outset است. نحوه نمایش بستگی به دیفالت مرورگر دارد. نتیجه را در مرورگرهای مختلف ببینید. </p>
 <p class="mixed"> حاشیه این پاراگراف ترکیبی از dotted و dashed و solid و double  است </p>
</body>
</html>
[us_single_image image=”10805″ align=”center”]

تنظیمات رنگ حاشیه‌ها

برای تعیین رنگ دلخواه برای حاشیه از پراپرتی border-color استفاده می‌کنیم و مقدار آن را به سه روش نام رنگ، مقدار هگز رنگ و مقدار rgb رنگ می‌دهیم. همین‌طور برای حاشیه‌های بالا، راست، پایین و چپ هم می‌توان رنگ‌هایی جداگانه با دادن ۴ مقدار به پراپرتی border-color تنظیم کرد.

اگر برای حاشیه رنگی را تعیین نکنیم اتفاقی که می‌افتد این است که حاشیه، رنگ المنت ( جزء ) خود را به ارث می‌برد.

در مثال زیر این نکات را باهم بررسی می‌کنیم.

v/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.dotted {
		border-style: dotted;
		border-width: 0.2em;
		border-color: red;
	}
	p.dashed {
		border-style: dashed;
		border-width: 0.03cm;
		border-color: blue;
	}
	p.solid {
		border-style: solid;
		border-width: 4px;
		border-color: green;
	}
	p.double {
		border-style: double;
		border-width: 7px;
		border-color: yellow;
	}
	p.mixed {
		border-style: solid double dashed dotted;
		border-width: 4px 7px 0.03cm 0.2em;
		border-color: red blue green yellow;
	}
	p.noborder {
		color: #996633;
		border-style: solid;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="dotted"> حاشیه این پاراگراف dotted است </p>
 <p class="dashed"> حاشیه این پاراگراف dashed است </p>
 <p class="solid"> حاشیه این پاراگراف solid است </p>
 <p class="double"> حاشیه این پاراگراف double است </p>
 <p class="mixed"> حاشیه این پاراگراف ترکیبی از dotted و dashed و solid و double  است </p>
 <p class="noborder"> حاشیه این پاراگراف تعیین نشده است اما رنگی برای این پاراگراف تنظیم کرده‌ایم که حاشیه نیز این رنگ را به ارث می‌برد. </p>
</body>
</html>
[us_single_image image=”10806″ align=”center”]

نکته: می‌توان پراپرتی های حاشیه را به‌گونه‌ای دیگر به کاربرد. روش کار به این صورت است که برای تنظیم حاشیه یک جزء، از ۴ پراپرتی استفاده می‌کنیم که هر پراپرتی ۳ قسمت دارد. قسمت اول border است. قسمت دوم برای تعیین حاشیه بالا، پایین، چپ و یا راست است یعنی top ، right ، bottom و left. قسمت سوم هم انتخاب نوع استایل است که می‌تواند style، color و یا width باشد. به‌عنوان‌مثال می‌توان برای انتخاب حاشیه بالا، پراپرتی borde-top-… را نوشت که به‌جای سه‌نقطه می‌توان style و یا color و یا width را نوشت. در مثال زیر این نکته را بررسی می‌کنیم:

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border-top-style: solid; 
		border-right-style: dotted;
		border-bottom-style: dashed;
		border-left-style: double;

	}
	p.p02 {
		border-style: solid;
		border-top-color: purple; 
		border-right-color: pink;
		border-bottom-color: coral;
		border-left-color: olivedrab;
	}
	p.p03 {
		border-style: solid;
		border-top-width: 3px; 
		border-right-width: 4px;
		border-bottom-width: 2px;
		border-left-width: 1px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است </p>
 <p class="p02"> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است  </p>
 <p class="p03"> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است </p>
</body>
</html>
[us_single_image image=”10807″ align=”center”]

برای انتخاب حاشیه‌ها نیز روش دیگری داریم که حاشیه‌های بالا و پایین باهم و حاشیه‌های چپ و راست باهم انتخاب می‌شوند. بدین ترتیب که هر پراپرتی حاشیه، دو مقدار می‌گیرد که مقدار اول برای حاشیه‌های بالا و پایین و مقدار دوم برای حاشیه‌های چپ و راست می‌باشد.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border-top-style: solid; 
		border-right-style: dotted;
		border-bottom-style: solid;
		border-left-style: dotted;

	}
	p.p02 {
		border-style: solid dotted;
	}

	p.p03 {
		border-style: solid;
		border-top-color: purple; 
		border-right-color: pink;
		border-bottom-color: purple;
		border-left-color: pink;
	}
	p.p04 {
		border-style: solid;
		border-color: purple pink ;
	}
	p.p05 {
		border-style: solid;
		border-top-width: 3px; 
		border-right-width: 4px;
		border-bottom-width: 3px;
		border-left-width: 4px;
	}
	p.p06 {
		border-style: solid;
		border-width: 3px 4px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است </p>
 <p class="p02"> حاشیه‌ها دقیقا حاشیه‌های پاراگراف بالا هستند  </p>
 <p class="p03"> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است </p>
 <p class="p04"> حاشیه‌ها دقیقا حاشیه‌های پاراگراف بالا هستند </p>
 <p class=p05> حاشیه هر سمت با یک پراپرتی انتخاب و استایل داده‌شده است </p>
 <p class="p06"> حاشیه‌ها دقیقا حاشیه‌های پاراگراف بالا هستند </p>
</body>
</html>
[us_single_image image=”10815″ align=”center”]

تا اینجا فهمیدیم که برای استایل دادن به حاشیه‌ها می‌توانیم هر حاشیه را جداگانه انتخاب کنیم و یا حاشیه‌ها را دو تا دو تا انتخاب کنیم و به آن‌ها استایل بدهیم.

هر پراپرتی حاشیه می‌تواند ۱ تا ۴ مقدار بگیرد. یعنی مثلا پراپرتی border-style می‌تواند ۱ یا ۲ یا ۳ و یا ۴ مقدار بگیرد. برای جمع‌بندی پراپرتی border-style را با تعداد مقادیر مختلف بررسی می‌کنیم. حالات مختلف را برای پراپرتی های border-color و border-width را به‌عنوان تمرین بررسی نمایید.

پراپرتی border-style را در نظر بگیرید ( که یک پراپرتی حاشیه گذاری است ). این پراپرتی از ۱ تا ۴ مقدار می‌تواند بگیرد که در زیر بررسی می‌شوند:

۱) Border-style: dotted solid double dashed;

حاشیه بالا نقطه‌چین، حاشیه راست‌خط پیوسته، حاشیه پایین جفت خط و حاشیه چپ خط چین.

۲) Border-style: dotted solid double;

حاشیه بالا نقطه‌چین، حاشیه راست و چپ خط پیوسته و حاشیه پایین جفت خط

۳) Border-style: dotted solid;

حاشیه بالا و پایین نقطه‌چین و حاشیه چپ و راست‌خط پیوسته

۴) Border-style: dotted;

هر ۴ حاشیه نقطه‌چین.

در مثال‌های بالا دیدیم که برای استایل دادن به حاشیه روش‌های مختلفی داریم. برای حاشیه گذاری نیز shorthand داریم که می‌توانیم کدها را تا حد امکان ساده کنیم و برای حاشیه کدها را در یک خط بنویسیم بجای چندین خط. بدین ترتیب که پراپرتی border را می‌نویسیم و به آن ۳ مقدار می‌دهیم. مقدار اول پراپرتی border-width را تعیین می‌کند، مقدار دوم border-style را ایجاد می‌کند که حتما باید نوشته شود و مقدار سوم رنگ حاشیه را تعیین می‌کند.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border-style: solid; 
		border-width: 3px;
		border-color: red;
	}
	p.p02 {
		border: 3px solid red;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> از ۳ پراپرتی برای ایجاد حاشیه استفاده کرده‌ایم </p>
 <p class="p02"> حاشیه بالا را با shorthand ایجاد کرده‌ایم </p>
</body>
</html>
[us_single_image image=”10816″ align=”center”]

همچنین می‌توانید استایل ها را برای یک حاشیه از ۴ حاشیه بنویسید:

/*style.css*/	
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border-top: 2px solid red;
		background-color: #99ff66;
	}
	p.p02 {
		border-right: 3px solid blue;
		background-color: #99ff66;
	}
	p.p03 {
		border-bottom: 2px solid green;
		background-color: #99ff66;
	}
	p.p04 {
		border-left: 3px solid yellow;
		background-color: #99ff66;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> استایل به حاشیه بالا </p>
 <p class="p02"> استایل به حاشیه راست </p>
 <p class="p03"> استایل به حاشیه پایین </p>
 <p class="p04"> استایل به حاشیه چپ </p>
</body>
</html>
[us_single_image image=”10817″]

ایجاد حاشیه گرد برای اجزاء

در مثال‌های حل‌شده، حاشیه‌هایی را با زاویه قائمه ایجاد کرده‌ایم. پراپرتی border-radius که مقداری عددی و با واحد پیکسل می‌گیرد، می‌تواند حاشیه‌های گرد را ایجاد کند. هرچه مقدار را بیشتر بدهیم، گوشه‌های حاشیه گردتر خواهد بود.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border: 2px solid red;
		background-color: #669999;
	}
	p.p02 {
		border: 3px solid blue;
		background-color: #669999;
		border-radius: 3px;
	}
	p.p03 {
		border: 2px solid pink;
		background-color: #669999;
		border-radius: 6px
	}
	p.p04 {
		border: 3px solid yellow;
		background-color: #669999;
		border-radius: 10px
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> حاشیه معمولی </p>
 <p class="p02"> حاشیه گرد </p>
 <p class="p03"> حاشیه گردتر </p>
 <p class="p04"> گردی حاشیه متناسب با مقدار پراپرتی border-radius است </p>
</body>
</html>
[us_single_image image=”10818″ align=”center”]

تنظیمات مارجین برای اجزاء

یکی از مباحث مهم در CSS تعیین میزان مارجین برای اجزا است. اما مارجین چیست و چرا به کار می‌رود؟

در حالت عادی وقتی چند جزء را در صفحه قرار می‌دهید اگر آن اجزاء حاشیه داشته باشند، این حاشیه‌ها به هم نمی‌چسبند و فاصله کوچکی بین آن‌ها قرار می‌گیرد که می‌توان این فاصله کوچک بین دو جزء و در کل فاصله بیرونی بین اجزا را در هر ۴ طرف تنظیم کرد. پس به فاصله بیرونی هر جز از حاشیه آن ( جزء می‌تواند حاشیه نداشته باشد  که در این صورت، مرورگر حاشیه‌ای را برای اجزاء در نظر می‌گیرد ) مارجین می‌گوییم که در این فاصله هیچ جزئی نمی‌تواند قرار بگیرد. همانند آنچه در حاشیه گذاری باهم بررسی کردیم و دیدیم که می‌توان در هر سمت یک جزء حاشیه‌ای را قرارداد، می‌توانیم مارجین را به هرکدام از ۴ طرف محتوای یک جزء اعمال کنیم.

مارجین را با پراپرتی margin تنظیم می‌کنیم. انواع و مقادیر آن را در ادامه این قسمت باهم بررسی می‌کنیم.

برای تعیین مارجین برای هر سمت محتوای یک جزء، ۴ پراپرتی داریم که هرکدام از این پراپرتی دوقسمتی هستند. قسمت اول که همان margin است و قسمت دوم محل مارجین است. یعنی بالا، پایین، چپ و یا راست بودن آن. پس پراپرتی های زیر را برای تنظیمات مارجین داریم:

margin-top: برای مارجین بالا

margin-right: برای مارجین راست

margin-bottom: برای مارجین پایین

margin-left: برای مارجین سمت چپ

مقادیری که این پراپرتی ها می‌توانند بگیرند عبارتند از موارد زیر:

  • auto: با این مقدار، مرورگر متناسب با اندازه صفحه مارجین را تعیین می‌کند.
  • مقدار عددی: مقداری را با واحدهای px، pt، cm و em می‌دهیم به پراپرتی می‌دهیم.
  • تعیین مقدار با % : مقداری را از ۰ تا ۱۰۰ می‌دهیم و علامت در % را می‌نویسیم. که در این صورت مارجین متناسب با میزان درصد تعیین‌شده و اندازه کل جزء ، تغییر میابد.
  • inherit: می‌توان مارجین خاصی را تعیین نکرد و این مقدار را به پراپرتی بدهیم که در این صورت مارجین محتوا از مارجین المنت مربوطه به ارث می‌رود.

نکته: مقادیر منفی را می‌توان به پراپرتی های مارجین داد.

در مثال زیر برای ۴ پاراگراف تنظیمات مارجین را انجام داده‌ایم.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border: 2px solid red;
	}
	p.p02 {
		margin: 0;
		border: 5px solid blue;
	}
	p.p03 {
		border: 5px solid pink;
		background-color: #aaaaaa;
		margin-top: 0;
		margin-right: 18px;
		margin-bottom: 12px;
		margin-left: 5px
	}
	p.p04 {
		border: 2px solid blue;
		background-color: #aaaaaa;
		margin: 7px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف بدون مارجین است. اگر مارجین تعیین نشود، مرورگر مارجین دیفالتش را در نظر می‌گیرد.</p>
 <p class="p02"> در این پاراگراف مارجین ۰ در نظر گرفته‌شده است. مارجین ۰ با دیفالت فرقی ندارد. حاشیه این پاراگراف را به حاشیه پاراگراف پایینی چسبانده‌ایم. </p>
 <p class="p03"> در این پاراگراف از ۴ پراپرتی برای تنظیم مارجین استفاده کرده‌ایم. مارجین پاراگراف بالا صفر است. مارجین بالای این پاراگراف را هم صفر گرفته این تا به هم بچسبند. </p>
 <p class="p04"> اگر از پراپرتی margin به‌تنهایی استفاده کنیم، مارجین به هر چهار طرف اعمال می‌شود. مانند این پاراگراف که یک مارجین برای هر ۴ طرف دارد. </p>
</body>
</html>
[us_single_image image=”10819″ align=”center”]

می‌توان ۴ پراپرتی را خلاصه کرد و از shorthand پراپرتی مارجین استفاده کرد. در این صورت پراپرتی مارجین ۴ مقدار خواهد گرفته که به ترتیب برای مارجین های بالا، راست، پایین و چپ هستند.

در مثال زیر انواع مقداردهی به مارجین را خواهید دید.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p.p01 {
		border: 2px solid red;
		margin: 10%;
	}
	p.p02 {
		margin: 0;
		border: 5px solid blue;
	}
	p.p03 {
		border: 5px solid pink;
		background-color: #aaaaaa;
		margin-top: 0;
		margin-right: 18px;
		margin-bottom: 5px;
		margin-left: 13px
	}
	p.p04 {
		border: 2px solid blue;
		background-color: #aaaaaa;
		margin: 7px -5px 30px 20px;
	}
	p.p05 {
		border: 2px solid red;
		background-color: #aaaaaa;
		margin: auto;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> در این پاراگراف مارجین به درصد اعمال شده است. اندازه صفحه را بزرگ و کوچک کنید. مارجین ها ۱۰ درصد عرض صفحه هستند.</p>
 <p class="p02"> در این پاراگراف مارجین ۰ در نظر گرفته‌شده است. مارجین ۰ با دیفالت فرقی ندارد. حاشیه این پاراگراف را به حاشیه پاراگراف پایینی چسبانده‌ایم. </p>
 <p class="p03"> در این پاراگراف از ۴ پراپرتی برای تنظیم مارجین استفاده کرده‌ایم. مارجین پاراگراف بالا صفر است. مارجین بالای این پاراگراف را هم صفر گرفته این تا به هم بچسبند. </p>
 <p class="p04"> در این پاراگراف از shorthand مارجین استفاده کرده‌ایم. </p>
 <p class="p05"> در این پاراگراف مقدار مارجین auto است. اندازه صفحه را بزرگ و کوچک کرده و به مارجین های این پاراگراف دقت کنید. </p>
</body>
</html>
[us_single_image image=”10820″ align=”center”]

با توجه به مثال‌های بالا، پراپرتی margin می‌تواند از ۱ تا ۴ مقدار بگیرد:

۱) اگر پراپرتی margin تعداد ۴ مقدار بگیرد مانند: margine: 10px 15px 30px 25px;

این یعنی مارجین بالا ۱۰ پیکسل، مارجین راست ۱۵ پیکسل، مارجین پایین ۳۰ پیکسل و مارجین چپ ۲۵ پیکسل باشد.

۲) اگر پراپرتی margin تعداد ۳ مقدار بگیرد مانند: margin: 30px 15px 25px;

این پراپرتی ۳ مقدارِ بدین معنی است که مارجین بالا ۳۰ پیکسل، مارجین چپ و راست ۱۵ پیکسل و مارجین پایین ۲۵ پیکسل باشد.

۳) اگر ۲ مقدار به margin بدهیم مانند: margin: 20px 25px;

مقدار اول مارجین بالا و پایین و مقدار دوم مارجین چپ و راست را تعیین می‌کند. یعنی مارجین بالا و پایین ۲۰ پیکسل و مارجین چپ و راست ۲۵ پیکسل باشد.

۴) اگر به پراپرتی margin تنها یک مقدار بدهیم: margin: 10px;

همان‌طور که در مثال‌ها دیدیم، در این حالت این‌یک مقدار برای مارجین هر ۴ طرف آن جزء اعمال می‌شود.

مقدار auto برای پراپرتی margin

یکی از مقادیری را که پراپرتی مارجین می‌تواند بگیرد، auto است. مقدار auto بدین‌صورت عمل می‌کند که مرورگر اندازه عرضی را که برای هر جزء تعیین کرده‌اید را از اندازه عرض خودش کم می‌کند و عرض باقیمانده رابین مارجین چپ و راست به یک اندازه تقسیم می‌کند. مثلا اگر اندازه عرض یک جزء ۲۰۰ پیکسل باشد و عرض مرورگر ۵۰۰ پیکسل و مقدار auto  را به پراپرتی مارجین داده باشیم، در این صورت ۲۰۰ پیکسل از ۵۰۰ پیکسل کم می‌شود که باقیمانده ۳۰۰ پیکسل است. این ۳۰۰ پیکسل بین مارجین چپ و راست تقسیم می‌شود. یعنی هرکدام ۱۵۰ پیکسل خواهند بود.

از این طریق می‌توان یک جزء را در وسط صفحه نگه داشت. به مثال زیر توجه کنید:

ز/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	div.d01 {
		width: 250px;
		background-color: #a0a0a0;
		border: 2px solid red;
		margin: auto;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <div class="d01">
 	این دایو عرض ثابت ۲۰۰ پیکسل دارد. همچنین مقدار مارجین آن auto است. در عرض‌های بیشتر از ۲۰۰ پیکسل مرورگر، مرورگر ۲۰۰ پیکسل را از عرض خود کم می‌کند و باقیمانده را بین مارجین های چپ و راست به‌طور یکسان تقسیم می‌کند. بدین ترتیب این دایو در وسط مرورگر قرار می‌گیرد. کدها را درادیتور خودتان بنویسید و نتیجه را مشاهده کنید. عرض مرورگر را کم‌وزیاد کنید. 
 </div>
</body>
</html>
[us_single_image image=”10821″ align=”center”]

در مثال بالا، عرض دایو را حذف کنید و بعد عرض مرورگر را کم‌وزیاد کنید.

مقدار inherit برای پراپرتی margin

وقتی‌که مقدار margin یک جزء inherit باشد، یعنی مارجین خود را از مارجین جزئی که در آن قرارگرفته ای به ارث ببر. در مثال زیر پاراگرافی را درون دایو قرار داده‌ایم که مارجین خود را از مارجین دایو به ارث می‌برد.

/*style.css*/
 body { 
	 	/*direction: rtl;*/ 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p {
		direction: rtl;
	}
	div.d01 {
		width: 250px;
		background-color: #a0a0a0;
		border: 2px solid red;
		margin-left: 15px;
	}
	p.pindiv {
		color: white;
		margin-left: inherit;
		direction: ltr;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p> درون دایو زیر پاراگرافی را قرار داده‌ایم که مقدار مارجین آن inherit است. برای دایو نیز مارجین چپ ۱۵ پیکسل را تعیین کرده‌ایم. پس مارجین چپ پاراگراف نیز ۱۵ پیکسل را از دایو به ارث می‌برد. دایو parent پاراگراف است. </p>
 <p> <strong>نکته:</strong> دایو parent پاراگراف است. </p>
 <div class="d01">
 	<p class="pindiv"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid corporis, praesentium. Dolorum ut placeat mollitia delectus, optio sit autem voluptas alias, molestiae nobis totam asperiores excepturi fugiat dignissimos tempore quibusdam. </p> 
 </div>
 <p><strong> اگر دایرکشن کل body را ltr یعنی از راست به چپ قرار دهید، مارجین چپ به مارجین راست دایو اعمال می‌شود. برای همین مارجین body را کامنت کرده‌ایم و برای این‌که متن‌ها از سمت راست به چپ نوشته شوند، دایرکشن آن‌ها را راست به چپ تنظیم کرده‌ایم. با پراپرتی های دایرکشن و جریان طبیعی اجزا به‌زودی آشنا می‌شویم.  </strong></p>
</body>
</html>
[us_single_image image=”10822″ align=”center”]

 Margin Collapse

وقتی مارجین پایین و مارجین بالای یک جزء در هم ادغام شوند و فقط یک مارجین و مارجین بزرگ‌تر در نظر گرفته شود، Margin Collapse اتفاق میفتد. Margin Collapse فقط برای مارجین های بالا و پایین اتفاق میفتد. مارجین های چپ و راست از این پدیده مصون‌اند.

اگر دو جزء ۱ و ۲ از بالا به پایین به ترتیب قرار بگیرند و جزء ۱ مارجین پایینی به‌اندازه مثلا ۲۰ پیکسل داشته باشد و جزء ۲ مارجین بالایی به‌اندازه مثلا ۱۵ پیکسل داشته باشد، در ظاهر فاصله خالی بین این دو جزء باید جمع مارجین این دو جزء یعنی ۳۵ پیکسل باشد. Margin collapse باعث می‌شود که فقط مارجین بزرگ‌تر یعنی ۲۰ پیکسل در نظر گرفته شود. پس درواقع white space بین این اجزاء ۲۰ پیکسل است نه ۳۵ پیکسل.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p {
		border: 2px solid red; 
		background-color: #a0a0a0;
		color: white;
	}
	p.p01 {
		margin: 0 0 20px 0;
	}
	p.p02 {
		margin: 30px 0 0 0;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف مارجین پایین ۲۰ پیکسل دارد. </p>
 <p class="p02"> این پاراگراف مارجین بالای ۳۰ پیکسل دارد.</p>
 <p class="p03"> فاصله خالی بین دو پاراگراف بالا برابر با مارجین بزرگ‌تر یعنی ۳۰ پیکسل است. </p>
</body>
</html>
[us_single_image image=”10823″ align=”center”]

در مرورگر دکمه F12 را فشار داده و در پنجره بازشده در قسمت layout می‌توانید فاصله‌ها را مشاهده کنید.

تنظیمات padding برای اجزاء

از دیگر مباحث مهم در CSS تنظیمات padding است. padding فاصله خالی بین محتوای یک جزء و حاشیه آن است که جزء می‌تواند حاشیه داشته باشد و یا نداشته باشد. اگر  جزء حاشیه نداشته باشد ( برای آن حاشیه‌ای را تنظیم نکنیم )، خود مرورگر حاشیه‌ای فرضی برای هر جزء در نظر می‌گیرد.

این فاصله‌ی بین محتوا و حاشیه را با پراپرتی padding کنترل می‌کنیم و مانند حاشیه و مارجین، می‌توان padding را برای ۱ یا ۲ یا ۳ و یا هر ۴ طرف جزء ایجاد کرد. ( ترتیب بالا، راست، پایین و چپ هم در اینجا کاربرد دارد. )

پراپرتی های دسته padding هم می‌توانند دوقسمتی باشند که قسمت اول نوع پراپرتی یعنی padding و قسمت دوم سمتی که می‌خواهیم به آن padding بدهیم یعنی یکی از مقادیر top، right ، bottom و left پس برای padding نیز ۴ پراپرتی زیر راداریم:

padding-top

padding-right

padding-bottom

padding-left

مقادیری را که می‌توان به این پراپرتی ها داد، ۳ دسته هستند که عبارتند از:

  • مقدار عددی با واحدهای px ، pt ، cm و em
  • تعیین مقدار با درصد که عددی از ۰ تا ۱۰۰ همراه با علامت % را به پراپرتی می‌دهیم.
  • inherit: که در این صورت جزء، padding خود را از parent خود به ارث می‌برد.

نکته: پراپرتی padding مقدار auto نمی‌گیرد.

در مثال زیر با ۴ پراپرتی به پاراگراف padding داده‌ایم.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p {
		border: 2px solid red; 
		background-color: #a0a0a0;
		color: white;
	}
	p.p02 {
		margin: 10px;
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 15px;
		padding-left: 18px;
	}
	p.p03 {
		margin: 20px;
		padding-top: 30px;
		padding-right: 25px;
		padding-bottom: 20px;
		padding-left: 28px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف بدون padding است. متن به حاشیه چسبیده است. </p>
 <p class="p02"> تنظیمات padding این پاراگراف با ۴ پراپرتی انجام‌شده است. فاصله متن‌های این پاراگراف با حاشیه‌هایش از بالا ۱۰ پیکسل، راست ۲۰ پیکسل، پایین ۱۵ پیکسل و چپ ۱۸ پیکسل است. </p>
 <p class="p03"> padding و margin های این پاراگراف بیشتر از پاراگراف بالایی هستند. </p>
</body>
</html>
[us_single_image image=”10824″ align=”center”]

4 پراپرتی را می‌توان خلاصه کرد و در یک پراپرتی همه مقادیر را نوشت. حتما میدانید که مقدار اول برای padding بالا، مقدار دوم برای padding راست، مقدار سوم برای padding پایین و مقدار چهارم برای padding چپ است.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p {
		border: 2px solid red; 
		background-color: #a0a0a0;
		color: white;
	}
	p.p02 {
		margin: 10px;
		padding-top: 10px;
		padding-right: 20px;
		padding-bottom: 15px;
		padding-left: 18px;
	}
	p.p03 {
		margin: 20px;
		padding: 10px 20px 15px 18px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف بدون padding است. متن به حاشیه چسبیده است. </p>
 <p class="p02"> تنظیمات padding این پاراگراف با ۴ پراپرتی انجام‌شده است. فاصله متن‌های این پاراگراف با حاشیه‌هایش از بالا ۱۰ پیکسل، راست ۲۰ پیکسل، پایین ۱۵ پیکسل و چپ ۱۸ پیکسل است. </p>
 <p class="p03"> در این پاراگراف تنظیمات padding را با shorthand پراپرتی padding انجام داده‌ایم. پراپرتی padding را می‌نویسیم و به آن ۴ مقداری را که به پراپرتی های padding پاراگراف بالا داده‌ایم را می‌دهیم. تنظیمات padding پاراگراف بالا را در یک پراپرتی برای این پاراگراف می‌نویسیم.</p>
</body>
</html>
[us_single_image image=”10825″ align=”center”]

پراپرتی padding نیز می‌تواند از ۱ تا ۴ مقدار بگیرد.

اگر ۴ مقدار را به پراپرتی بدهیم: padding: Apx Bpx Cpx Dpx;

یعنی مقادیر padding به این صورت باشند که از بالا A پیکسل، از راست B پیکسل، از پایین C پیکسل و از چپ D پیکسل باشد.

اگر ۳ مقدار را به پراپرتی بدهیم: padding: Apx Bpx Cpx;

مقادیر padding از بالا A پیکسل، از چپ و راست B پیکسل و از پایین C پیکسل خواهد بود.

اگر ۲ مقدار را به پراپرتی padding بدهیم: padding: Apx Bpx;

مقدار A پیکسل از بالا و پایین و مقدار B پیکسل از چپ و راست padding داریم.

اگر ۱ مقدار را به padding بدهیم: padding: Apx;

در این صورت padding های هر ۴ طرف برابر مقدار A پیکسل خواهد بود.

/*style.css*/
 body { 
	 	direction: rtl; 
	 	font-family: "Myriad عربي";
	 	background-color: #66ffcc;
	}
	p {
		border: 2px solid red; 
		background-color: #a0a0a0;
		color: white;
	}
	p.p01 {
		margin: 10px;
	}
	p.p02 {
		margin: 10px;
		padding: 10px 20px 15px 18px;
	}
	p.p03 {
		margin: 10px;
		padding: 10px 20px 18px;
	}
	p.p04 {
		margin: 10px;
		padding: 10px 20px;
	}
	p.p05 {
		margin: 10px;
		padding: 10px;
	}
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title> Page Title </title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
 <p class="p01"> این پاراگراف بدون padding است. متن به حاشیه چسبیده است. </p>
 <p class="p02"> پراپرتی padding در این پاراگراف با ۴ مقدار set شده است. </p>
 <p class="p03"> پراپرتی padding در این پاراگراف با ۳ مقدار set شده است. </p>
 <p class="p04"> پراپرتی padding در این پاراگراف با ۲ مقدار set شده است. </p>
 <p class="p05"> پراپرتی padding در این پاراگراف با ۱ مقدار set شده است. </p>
</body>
</html>
[us_single_image image=”10826″ align=”center”]

نوشته های مرتبط

دیدگاه ‏خود را بنویسید