หลังจากอัปเดตโค้ดหน้าเว็บของเราจะมีลักษณะดังนี้:

ผลลัพธ์ด้านบนแสดงให้เห็นว่าข้อความได้รับระยะขอบด้านล่าง -5%

การใช้คุณสมบัติด้านขวาของกำไรติดลบ

ด้วยการให้ค่า -55% ของคุณสมบัติระยะขอบขวากับองค์ประกอบ

มันจะเคลื่อนไปในทิศทางตรงกันข้าม:

< แผนก สไตล์ = 'สีพื้นหลัง: dodgerblue;' >
< h3 สไตล์ = 'สี: ดำ; ขอบซ้าย: -55%; ' > ยินดีต้อนรับสู่ลินุกซ์ชินท์ < / h3 >
< / แผนก >
< img src = '../book.jpg' ความสูง = 'ห้าสิบ%' ; ความกว้าง = 'ห้าสิบ%' >

หลังจากรันผลลัพธ์โค้ดจะเป็นดังนี้:

ผลลัพธ์แสดงว่าข้อความได้รับระยะขอบติดลบ

การใช้คุณสมบัติระยะขอบซ้ายติดลบ

คุณสมบัติระยะขอบซ้ายที่มีค่าติดลบทำงานในลักษณะเดียวกัน ในโค้ดด้านล่าง องค์ประกอบ “

” จะย้าย 50% ไปทางด้านซ้ายในทิศทางตรงกันข้ามกับคุณสมบัติระยะขอบซ้าย:

<สไตล์ div = 'สีพื้นหลัง: dodgerblue;' >

= 'สี: ดำ; ขอบซ้าย: -50%;' > ยินดีต้อนรับสู่ Linuxint >
>
= '../book.jpg' ความสูง = 'ห้าสิบ%' ; ความกว้าง = 'ห้าสิบ%' >

ผลลัพธ์ของโค้ดด้านบนคือ:

นั่นคือวิธีการทำงานของ Negative Margin ใน CSS

ทำไม margin-top:-5 != margin-bottom:5?

เมื่อ ' ขอบล่าง: 5% ” จะใช้เพื่อเพิ่มระยะขอบจากด้านล่างไปยังกึ่งกลางขององค์ประกอบ แต่เมื่อ “ ระยะขอบบน:-5% ” ใช้เพื่อเพิ่มระยะขอบ 5% จากด้านบน แต่ในทิศทางตรงกันข้าม (นอกหน้า)

บทสรุป

ใน CSS ระยะขอบเชิงลบทำงานในทิศทางตรงกันข้ามโดยกำหนดค่าระยะขอบ โดยจะย้ายเนื้อหาขององค์ประกอบไปในทิศทางออก/ด้านนอกของหน้า “margin-top:-5″ ไม่เท่ากับ “margin-bottom:5” เนื่องจากค่าคุณสมบัติทั้งสองจะย้ายเนื้อหาไปในทิศทางตรงกันข้ามกับตำแหน่งพาเรนต์ บทความนี้ได้แสดงวิธีการทำงานของ Margin ติดลบเรียบร้อยแล้ว