คุณสมบัติระยะขอบ CSS
ตัวอย่าง
ตั้งค่าระยะขอบสำหรับทั้งสี่ด้านของ <p> องค์ประกอบเป็น 35 พิกเซล:
p {
margin: 35px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติmarginกำหนดระยะขอบสำหรับองค์ประกอบ และเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติต่อไปนี้:
หากคุณสมบัติมาร์จิ้นมีค่าสี่ค่า:
- ระยะขอบ: 10px 5px 15px 20px;
- ระยะขอบบนคือ 10px
- ระยะขอบขวาคือ 5px
- ระยะขอบล่าง 15px
- ระยะขอบซ้าย 20px
หากคุณสมบัติมาร์จิ้นมีค่าสามค่า:
- ระยะขอบ: 10px 5px 15px;
- ระยะขอบบนคือ 10px
- ระยะขอบขวาและซ้ายคือ 5px
- ระยะขอบล่าง 15px
หากคุณสมบัติมาร์จิ้นมีสองค่า:
- ระยะขอบ: 10px 5px;
- ระยะขอบบนและล่างคือ 10px
- ระยะขอบขวาและซ้ายคือ 5px
หากคุณสมบัติมาร์จิ้นมีค่าเดียว:
- ระยะขอบ: 10px;
- ระยะขอบทั้งสี่คือ 10px
หมายเหตุ:อนุญาตให้ใช้ค่าลบ
| ค่าเริ่มต้น: | 0 |
|---|---|
| รับการถ่ายทอด: | ไม่ |
| เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
| รุ่น: | CSS1 |
| ไวยากรณ์ JavaScript: | วัตถุ .style.margin="100px 50px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
| Property | |||||
|---|---|---|---|---|---|
| margin | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
ไวยากรณ์ CSS
margin: length|auto|initial|inherit;
มูลค่าทรัพย์สิน
| Value | Description | Play it |
|---|---|---|
| length | Specifies a margin in px, pt, cm, etc. Default value is 0. Negative values are allowed. Read about length units | |
| % | Specifies a margin in percent of the width of the containing element | |
| auto | The browser calculates a margin | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
มาร์จิ้นยุบ
ระยะขอบด้านบนและด้านล่างขององค์ประกอบบางครั้งจะยุบลงในระยะขอบเดียวที่เท่ากับระยะขอบที่ใหญ่ที่สุดของทั้งสอง
สิ่งนี้จะไม่เกิดขึ้นกับระยะขอบแนวนอน (ซ้ายและขวา)! เฉพาะระยะขอบแนวตั้ง (บนและล่าง)!
ดูตัวอย่างต่อไปนี้:
ตัวอย่าง
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
ในตัวอย่างข้างต้น <p class="a"> องค์ประกอบมีระยะขอบด้านบนและด้านล่าง 30px <p class="b"> องค์ประกอบมีขอบบนและล่าง 20px
ซึ่งหมายความว่าระยะขอบแนวตั้งระหว่าง <p class="a"> และ <p class="b"> ควรเป็น 50px (30px + 20px) แต่เนื่องจากการยุบมาร์จิ้น ระยะขอบจริงจึงกลายเป็น 30px!
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตั้งค่าระยะขอบสำหรับองค์ประกอบ <p> เป็น 35 พิกเซลสำหรับด้านบนและด้านล่าง และ 70 พิกเซลสำหรับด้านขวาและด้านซ้าย:
p {
margin: 35px 70px;
}
ตัวอย่าง
ตั้งค่าระยะขอบสำหรับองค์ประกอบ <p> เป็น 35 พิกเซลสำหรับด้านบน 70 พิกเซลสำหรับด้านขวาและด้านซ้าย และ 50 พิกเซลสำหรับด้านล่าง:
p {
margin: 35px 70px 50px;
}
ตัวอย่าง
ตั้งค่าระยะขอบสำหรับองค์ประกอบ <p> เป็น 35 พิกเซลสำหรับด้านบน 70 พิกเซลสำหรับด้านขวา 50 พิกเซลสำหรับด้านล่าง และ 90 พิกเซลสำหรับด้านซ้าย:
p {
margin: 35px 70px 50px 90px;
}
หน้าที่เกี่ยวข้อง
กวดวิชาCSS: มาร์จิ้น CSS
กวดวิชา CSS: CSS Box Model
การอ้างอิง HTML DOM: คุณสมบัติมาร์จิ้น