This translation is incomplete. Please help translate this article from English.
สาระสำคัญ
คุณสมบัติ 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. |
| Inherited | no |
| Percentages | refer to the width of the containing block |
| Media | visual |
| Computed value | as each of the properties of the shorthand:
|
| 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>ที่สัมพันธ์กับ ความกว้าง ของภายในบล็อกนั้น อนุญาตให้ใช้ค่าที่ติดลบได้ autoauto จะถูกแทนที่ด้วยบางค่าที่เหมาะสมเช่น สามารถใช้ในการจัดแนวบล็อก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 | กำหนดนินามตั้งต้น |
ความกันได้ของเบราเซอร์
| คุณลักษณะ | 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 |