คุณสมบัติ 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,
ซึ่งกำหนดช่องว่างภายใน