margin

สาระสำคัญ

คุณสมบัติ CSS margin ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: margin-top, margin-right, margin-bottom และ margin-left.

อนุญาตให้ใช้ค่าที่ติดลบได้

ไวยากรณ์

/* นำไปใช้กับสี่ด้าน */
margin: 1em;

/* ด้านแนวตั้ง | ด้านแนวนอน */
margin: 5% auto;

/* ด้านบน | ด้านแนวนอน | ด้านล่าง */
margin: 1em auto 2em; 

/* ด้านบน | ด้านขวา | ด้านล่าง | ด้านซ้าย */
margin: 2px 1em 0 auto;

/* ค่า Global */
margin: inherit;
margin: initial;
margin: unset;

ค่า

ยอมรับทั้งหนึ่ง สอง สาม หรือสี่ค่า ดังต่อไปนี้:

<ความยาว>

กำหนดความกว้างคงที่ อนุญาตให้ใช้ค่าที่ติดลบได้ ดูที่ <length> สำหรับหน่วยวัดที่ใช้ได้

<ร้อยละ>

ค่า <percentage> ที่สัมพันธ์กับ ความกว้าง ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้

auto

auto จะถูกแทนที่ด้วยบางค่าที่เหมาะสม เช่น สามารถใช้ในการจัดแนวบล็อก div ลูกให้อยู่กึ่งกลางตามแนวนอนภายใน div  แม่ได้ { width:50%;  margin:0 auto; } 

• หนึ่ง ค่าจะถูกนำไปใช้กับทั้งสี่ด้าน
• สอง ค่าจะถูกนำไปใช้กับ ด้านบนและด้านล่าง และตามด้วย ด้านซ้ายและด้านขวา 
• สาม ค่าจะถูกนำไปใช้กับ ด้านบน ตามด้วยด้านซ้ายและด้านขวา และตามด้วย ด้านล่าง
• สี่ ค่าจะถูกนำไปใช้กับ ด้านบน ด้านขวา ด้านล่าง และด้านซ้าย ตามลำดับ (ทวนเข็มนาฬิกา)

ไวยากรณ์ทั่วไป

[ <length> | <percentage> | auto ]{1,4}

ตัวอย่าง

ตัวอย่างอย่างง่าย

HTML

<div class="ex1">
  margin:     auto;
  background: gold;
  width:      66%;
</div>
<div class="ex2">
  margin:     20px 0 0 -20px;
  background: gold;
  width:      66%;
</div>

CSS

.ex1 {
  margin: auto;
  background: gold;
  width: 66%;
}
.ex2 {
  margin: 20px 0px 0 -20px;
  background: gold;
  width: 66%;
}

ตัวอย่างอื่นๆ

margin: 5%;                /* ระยะขอบกั้น 5% ทั้งหมด */

margin: 10px;              /* ระยะขอบกั้น 10px ทั้งหมด */

margin: 1.6em 20px;        /* ระยะขอบกั้นด้านบนและด้านล่าง 1.6em และ ด้านซ้ายและด้านขวา 20px */

margin: 10px 3% 1em;       /* ระยะขอบกั้นด้านบน 10px ด้านซ้ายและด้านขวา 3% และด้านล่าง 1em */

margin: 10px 3px 30px 5px; /* ระยะขอบกั้นด้านบน 10px ด้านขวา 3px ด้านล่าง 30px และด้านซ้าย 5px */

margin: 1em auto;          /* ระยะขอบกั้นด้านบนและด้านล่าง 1em  และกล่องจะถูกจัดกึ่งกลางตามแนวนอน */

margin: auto;              /* กล่องจะถูกจัดกึ่งกลางตามแนวนอน ระยะขอบกั้นด้านบนและด้านล่างเป็น 0 */

การจัดกึ่งกลางตามแนวนอนด้วย margin: 0 auto;

เพื่อทำให้บางสิ่งอยู่กึ่งกลางตามแนวนอนในเบราเซอร์สมัยใหม่ จะใช้ display: flex; justify-content: center; .

อย่างไรก็ตาม เบราเซอร์เก่าเช่น IE8-9 ยังไม่พร้อมใช้งาน ในการเรียงให้กึ่งกลางภายในอิลิเมนต์แม่ ให้ใช้ margin: 0 auto;

ข้อกำหนด

ความกันได้ของเบราเซอร์

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

ดูเพิ่มเติม

• การยุบระยะขอบกั้น