ระยะห่างระหว่าง Elements ด้วย Margin

เมื่อไรก็ตามที่เราต้องการ Elements หรือวัตถุที่มากกว่า 2 ชิ้นขึ้นไปมาเรียงต่อ หรือนำมาชิดติดกัน margin ถือเป็นคำสั่งหนึ่งที่ใช้เว้นช่องว่าระยะห่างระหว่าง element ถึง element

คือ ถ้าเราเพิ่ม margin ให้กับ elements ใดๆ แล้ว ช่องว่างที่เกิดจากค่าของ margin นั้นจะเป็นพื้นที่ว่างเปล่า มองทะลุปรุโปร่งถึงข้างหลัง ตามขอบทุกๆ ด้านที่เราใส่ค่าเข้าไป และไม่แสดงพื้นหลังของ element และแสดงค่าจากในออกนอก ซึ่งไม่เหมือนกับการใช้ padding เพื่อกันข้อมูลออกจากขอบของ element ซึ่งจะกันเข้าข้างใน หรือจะให้ค่าจากนอกเข้าในนั่นเอง

เมื่อเราต้องกันวัตถุ 2 ชิ้นให้อยู่ห่างกันตามระยะที่เราต้องการ เช่นการใช้ div ถ้าจะให้ div สองอันอยู่ห่างกัน โดยกำหนดค่าให้ .box1 มี margin: 5px;

CSS

.box1 {
width: 200px;
height: 195px;
margin-bottom: 5px;
background: #FF0000;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background: #FF9900;
position: relative;
}

XHTML

<div class="box1">
box1
</div>
<div class="box2">

box2

<div class="box1">
box1
</div>
<div class="box2">
box2
</div>