Accessibility Links

• Skip to Content
• Skip to Main Navigation
• Skip to thaicss.com Search
• Accessibility help
• Access keys help
• 

 

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

โดย เมื่อ 2007-01-06 20:30:41 ดูทั้งหมด 149 ครั้ง

เมื่อไรก็ตามที่เราต้องการ 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;
}

-------HXTML--------

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

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

• • ยังไม่มีความคิดเห็น
  • แสดงความคิดเห็นกับ : ระยะห่างระหว่าง Elements ด้วย Margin

• About Author:

  • 

Back to Top

Tags:

1. margin
2. css

เนื้อหาที่เกี่ยวข้อง

1. Double-Float Margin Bug ใน IE6
2. padding, border, margin
3. เขียน CSS ในลักษณะต่างๆ
4. Horizontal Menu ง่ายๆ กับเมนูแนวนอน
5. การทำ Vertical Menu CSS

หรือกำลังสนใจ

1. เชียงใหม่หนาวแล้ว

Unknown Version Unknown