สาระสำคัญ
คุณสมบัติ CSS margin
ใช้ในการตั้งระยะขอบกั้นทั้งสี่ด้าน ซึ่งมีรูปย่อเพื่อหลีกเลี่ยงการตั้งแต่ละด้านที่แยกออกไปด้วยคุณสมบัติ margin อื่นๆ คือ: margin-top
, margin-right
, margin-bottom
และ margin-left
.
อนุญาตให้ใช้ค่าที่ติดลบได้
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, except elements with table display types other than table-caption , table and inline-table . It also applies to ::first-letter and ::first-line . |
Inherited | no |
Percentages | refer to the width of the containing block |
Computed value | as each of the properties of the shorthand:
|
Animation type | a length |
ไวยากรณ์
/* นำไปใช้กับสี่ด้าน */
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; }
- หนึ่ง ค่าจะถูกนำไปใช้กับทั้งสี่ด้าน
- สอง ค่าจะถูกนำไปใช้กับ ด้านบนและด้านล่าง และตามด้วย ด้านซ้ายและด้านขวา
- สาม ค่าจะถูกนำไปใช้กับ ด้านบน ตามด้วยด้านซ้ายและด้านขวา และตามด้วย ด้านล่าง
- สี่ ค่าจะถูกนำไปใช้กับ ด้านบน ด้านขวา ด้านล่าง และด้านซ้าย ตามลำดับ (ทวนเข็มนาฬิกา)
ไวยากรณ์ทั่วไป
ตัวอย่าง
ตัวอย่างอย่างง่าย
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. |
Candidate Recommendation | ไม่มีการเปลี่ยนแปลงอย่างมีนัยสำคัญ |
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 |