คุณสมบัติขอบด้านล่าง CSS
ตัวอย่าง
ตั้งค่าระยะขอบด้านล่างสำหรับองค์ประกอบ <p> เป็น 25 พิกเซล:
p.ex1 {
margin-bottom: 25px;
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติmargin-bottom
กำหนดระยะขอบด้านล่างขององค์ประกอบ
หมายเหตุ:อนุญาตให้ใช้ค่าลบ
ค่าเริ่มต้น: | 0 |
---|---|
รับการถ่ายทอด: | ไม่ |
เคลื่อนไหวได้: | ใช่ดูคุณสมบัติแต่ละรายการ อ่านเกี่ยวกับแอนิเมชั่น |
รุ่น: | CSS1 |
ไวยากรณ์ JavaScript: | วัตถุ .style.marginBottom="100px" |
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
ไวยากรณ์ CSS
margin-bottom: length|auto|initial|inherit;
มูลค่าทรัพย์สิน
Value | Description | Play it |
---|---|---|
length | Specifies a fixed bottom margin in px, cm, em, etc. Default value is 0. Negative values are allowed. Read about length units | |
% | Specifies a bottom margin in percent of the width of the containing element | |
auto | The browser calculates a bottom 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> เป็น 10% ของความกว้างของคอนเทนเนอร์:
p.ex1 {
margin-bottom: 10%;
}
ตัวอย่าง
ตั้งค่าระยะขอบด้านล่างสำหรับ <p> องค์ประกอบเป็น 2 em:
p.ex1 {
margin-bottom: 2em;
}
หน้าที่เกี่ยวข้อง
กวดวิชาCSS: มาร์จิ้น CSS
การอ้างอิง HTML DOM: คุณสมบัติ marginBottom