ระยะห่างระหว่าง 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>

ตัวอย่างการใช้ margin

Back to Top

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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top