CSS Margins
ระยะขอบจะใช้เพื่อสร้างช่องว่างรอบองค์ประกอบ นอกเส้นขอบที่กำหนดไว้
CSS Margins
คุณสมบัติ CSS marginถูกใช้เพื่อสร้างช่องว่างรอบองค์ประกอบ นอกขอบเขตที่กำหนดไว้
ด้วย CSS คุณสามารถควบคุมระยะขอบได้อย่างเต็มที่ มีคุณสมบัติสำหรับการตั้งค่าระยะขอบสำหรับแต่ละด้านขององค์ประกอบ (บน ขวา ล่าง และซ้าย)
มาร์จิ้น - ฝ่ายบุคคล
CSS มีคุณสมบัติสำหรับระบุระยะขอบสำหรับแต่ละด้านขององค์ประกอบ:
margin-topmargin-rightmargin-bottommargin-left
คุณสมบัติระยะขอบทั้งหมดสามารถมีค่าต่อไปนี้:
- อัตโนมัติ - เบราว์เซอร์คำนวณระยะขอบ
- ความยาว - ระบุระยะขอบเป็น px, pt, cm ฯลฯ
- % - ระบุระยะขอบเป็น % ของความกว้างขององค์ประกอบที่มี
- สืบทอด - ระบุว่ามาร์จิ้นควรสืบทอดจากองค์ประกอบหลัก
เคล็ดลับ:อนุญาตให้ใช้ค่าลบ
ตัวอย่าง
กำหนดระยะขอบที่แตกต่างกันสำหรับทั้งสี่ด้านของ <p> องค์ประกอบ:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin - ทรัพย์สินชวเลข
ในการย่อโค้ด คุณสามารถระบุคุณสมบัติระยะขอบทั้งหมดในคุณสมบัติเดียวได้
คุณสมบัติmarginเป็นคุณสมบัติชวเลขสำหรับคุณสมบัติระยะขอบแต่ละรายการต่อไปนี้:
margin-topmargin-rightmargin-bottommargin-left
นี่คือวิธีการทำงาน:
หากmarginคุณสมบัติมีค่าสี่ค่า:
- ระยะขอบ: 25px 50px 75px 100px;
- ระยะขอบบนคือ 25px
- ระยะขอบขวา 50px
- ระยะขอบล่าง 75px
- ระยะขอบซ้ายคือ 100px
ตัวอย่าง
ใช้คุณสมบัติชวเลขระยะขอบด้วยสี่ค่า:
p {
margin: 25px 50px 75px 100px;
}
หากmarginคุณสมบัติมีสามค่า:
- ระยะขอบ: 25px 50px 75px;
- ระยะขอบบนคือ 25px
- ระยะขอบขวาและซ้าย 50px
- ระยะขอบล่าง 75px
ตัวอย่าง
ใช้คุณสมบัติชวเลขระยะขอบด้วยสามค่า:
p {
margin: 25px 50px 75px;
}
หากmarginคุณสมบัติมีสองค่า:
- ระยะขอบ: 25px 50px;
- ระยะขอบบนและล่าง 25px
- ระยะขอบขวาและซ้าย 50px
ตัวอย่าง
ใช้คุณสมบัติชวเลขระยะขอบด้วยสองค่า:
p {
margin: 25px 50px;
}
หากmarginคุณสมบัติมีค่าหนึ่งค่า:
- ระยะขอบ: 25px;
- ระยะขอบทั้งสี่คือ 25px
ตัวอย่าง
ใช้คุณสมบัติชวเลขมาร์จิ้นด้วยค่าเดียว:
p {
margin: 25px;
}
ค่าอัตโนมัติ
คุณสามารถตั้งค่าคุณสมบัติระยะขอบให้autoจัดองค์ประกอบตามแนวนอนภายในคอนเทนเนอร์ได้
จากนั้นองค์ประกอบจะใช้ความกว้างที่ระบุ และพื้นที่ที่เหลือจะถูกแบ่งเท่าๆ กันระหว่างระยะขอบด้านซ้ายและด้านขวา
ตัวอย่าง
ใช้ระยะขอบ: อัตโนมัติ:
div {
width: 300px;
margin:
auto;
border: 1px solid red;
}
คุณค่าที่สืบทอดมา
ตัวอย่างนี้ให้ระยะขอบด้านซ้ายขององค์ประกอบ <p class="ex1"> สืบทอดมาจากองค์ประกอบหลัก (<div>):
ตัวอย่าง
การใช้ค่าสืบทอด:
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left:
inherit;
}