คุณสมบัติ margin

คุณสมบัติ margin กำหนดช่องว่างภายนอก ขององค์ประกอบ ค่าของคุณสมบัติคือ หน่วย สำหรับขนาด ใดๆ หรือค่าคีย์เวิร์ด auto ซึ่งให้เบราว์เซอร์คำนวณช่องว่าง ขององค์ประกอบโดยอัตโนมัติ โดยค่าเริ่มต้น เบราว์เซอร์แต่ละตัวอาจ เพิ่มช่องว่างต่างๆ ให้กับองค์ประกอบ

คุณสมบัตินี้เป็นคุณสมบัติแบบย่อสำหรับ margin-top, margin-right, margin-bottom, margin-left

ไวยากรณ์

selector {
	margin: value;
}

จำนวนค่า

คุณสมบัติ margin รับค่าได้ 1, 2, 3 หรือ 4 ค่า โดยคั่นด้วยช่องว่าง:

จำนวน	คำอธิบาย
`1`	หนึ่งค่าจะกำหนดช่องว่างทุกด้านขององค์ประกอบ
`2`	ค่าที่หนึ่งกำหนดช่องว่างด้านบนและด้านล่าง และค่าที่สอง - ด้านขวาและด้านซ้าย
`3`	ค่าที่หนึ่งกำหนดช่องว่างด้านบน ค่าที่สอง - ด้านขวาและด้านซ้าย และค่าที่สาม - ด้านล่าง
`4`	ค่าที่หนึ่งกำหนดช่องว่างด้านบน ค่าที่สอง - ด้านขวา ค่าที่สาม - ด้านล่าง และค่าที่สี่ - ด้านซ้าย

ตัวอย่าง

ตอนนี้เราจะมีบล็อกที่ไม่มีช่องว่าง:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

ตัวอย่าง

ตอนนี้เรากำหนดช่องว่างให้บล็อกที่ 10px:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

ตัวอย่าง

กำหนดช่องว่างให้บล็อกที่ 10px ด้านบน และด้านล่าง และ 20px - ด้านซ้ายและด้านขวา:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

ตัวอย่าง

กำหนดช่องว่างให้บล็อกที่ 5px ด้านบน, 15px ด้านขวา, 25px ด้านล่าง และ 35px ด้านซ้าย:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

ดูเพิ่มเติม

คุณสมบัติ padding,
ซึ่งกำหนดช่องว่างภายใน