margin

สาระสำคัญ

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

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

Initial value	as each of the properties of the shorthand: `margin-bottom`: `0` `margin-left`: `0` `margin-right`: `0` `margin-top`: `0`
Applies to	all elements, except elements with table `display` types other than `table-caption`, `table` and `inline-table`. It also applies to `::first-letter`.
Inherited	no
Percentages	refer to the width of the containing block
Media	visual
Computed value	as each of the properties of the shorthand: `margin-bottom`: the percentage as specified or the absolute length `margin-left`: the percentage as specified or the absolute length `margin-right`: the percentage as specified or the absolute length `margin-top`: the percentage as specified or the absolute length
Animation type	a length
Canonical order	the unique non-ambiguous order defined by the formal grammar

ไวยากรณ์

/* นำไปใช้กับสี่ด้าน */
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;

ข้อกำหนด

ข้อกำหนด	สถานะ	ความเห็น
CSS Basic Box Model The definition of 'margin' in that specification.	Working Draft	ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ
CSS Transitions The definition of 'margin' in that specification.	Working Draft	กำหนดให้ `margin` สามารถเคลื่อนไหวได้
CSS Level 2 (Revision 1) The definition of 'margin' in that specification.	Recommendation	Removes its effect on inline elements.
CSS Level 1 The definition of 'margin' in that specification.	Recommendation	กำหนดนินามตั้งต้น

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

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!

Desktop
Mobile

คุณลักษณะ	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
การรองรับเบื้องต้น	1.0	(Yes)	1.0 (1.7 or earlier)	3.0	3.5	1.0 (85)
`ค่า auto`	1.0	?	1.0 (1.7 or earlier)	6.0 (โหมดจำกัด)	3.5	1.0 (85)

คุณลักษณะ

Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
การรองรับเบื้องต้น	1.0	(Yes)	1.0 (1)	6.0	6.0	1.0

ดูเพิ่มเติม

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