margin

สาระสำคัญ

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

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

Initial valueas each of the properties of the shorthand:
Applies toall elements, except elements with table display types other than table-caption, table and inline-table. It also applies to ::first-letter.
Inheritedno
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas 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 typea length
Canonical orderthe 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!

คุณลักษณะ 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

ดูเพิ่มเติม

Related Topics