CSS Margin ยุบ
บางครั้งระยะขอบทั้งสองจะยุบลงในระยะขอบเดียว
มาร์จิ้นยุบ
ระยะขอบด้านบนและด้านล่างขององค์ประกอบบางครั้งจะยุบลงในระยะขอบเดียวที่เท่ากับระยะขอบที่ใหญ่ที่สุดของทั้งสอง
สิ่งนี้จะไม่เกิดขึ้นกับระยะขอบซ้ายและขวา! เฉพาะระยะขอบบนและล่างเท่านั้น!
ดูตัวอย่างต่อไปนี้:
ตัวอย่าง
การสาธิตการยุบระยะขอบ:
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
ในตัวอย่างข้างต้น องค์ประกอบ <h1> มีระยะขอบด้านล่าง 50px และองค์ประกอบ <h2> มีการตั้งค่าระยะขอบด้านบนเป็น 20px
สามัญสำนึกดูเหมือนจะแนะนำว่าระยะขอบแนวตั้งระหว่าง <h1> และ <h2> จะเท่ากับ 70px (50px + 20px) แต่เนื่องจากการยุบขอบ ระยะขอบจริงจึงกลายเป็น 50px
คุณสมบัติมาร์จิ้น CSS ทั้งหมด
Property | Description |
---|---|
margin | A shorthand property for setting the margin properties in one declaration |
margin-bottom | Sets the bottom margin of an element |
margin-left | Sets the left margin of an element |
margin-right | Sets the right margin of an element |
margin-top | Sets the top margin of an element |