” gắn thẻ và đặt “ màu sắc ' sang màu đen:

< trung tâm >
= '../book.jpg' chiều cao = 'năm mươi%' ; chiều rộng = 'năm mươi%' >
= 'màu nền: Dodgerblue' >

= 'màu đen;' > Chào mừng bạn đến với Linuxhint >
>
>

Sau khi biên dịch đoạn mã trên, đầu ra trông giống như:

---

---

Các '

” ở cuối trang web trước khi áp dụng lề âm.

Sử dụng ký quỹ âm Thuộc tính hàng đầu

Thêm vào ' lề trên ” tài sản cho “

” phần tử và đặt giá trị của nó ở dạng âm. Chẳng hạn, ở đây -15% là giá trị của thuộc tính lề trên:

< trung tâm >
= '../book.jpg' chiều cao = 'năm mươi%' ; chiều rộng = 'năm mươi%' >
= 'màu nền:dodgerblue' >

= 'màu: đen; lề trên: -15%;' > Chào mừng bạn đến với Linuxhint >
>
>

Sau khi thực thi mã, trang web trông như thế này:

Đầu ra hiển thị rằng lề trên âm làm cho phần tử “

” hiển thị phía trước phần tử cha.

Sử dụng thuộc tính đáy ký quỹ âm

Áp dụng các thuộc tính tương tự như trên và chỉ cần thay đổi “ lề dưới ' tài sản. Sau đó, thêm một hình ảnh ở dưới cùng của phần tử “

” để xem các thay đổi trực quan:

< div phong cách = 'màu nền:dodgerblue' >
< h3 phong cách = 'màu: đen; lề dưới: -5%;' > Chào mừng đến với Linuxhint h3 >
div >
< hình ảnh src = '../book.jpg' chiều cao = 'năm mươi%' ; chiều rộng = 'năm mươi%' >

Sau khi cập nhật mã, trang web của chúng tôi trông như thế này:

Đầu ra ở trên cho thấy văn bản đang nhận được lề dưới -5%.

Sử dụng thuộc tính quyền ký quỹ âm

Bằng cách cho -55% giá trị của thuộc tính lề phải cho phần tử

, nó sẽ di chuyển theo hướng ngược lại:

< div phong cách = 'màu nền: dodgerblue;' >
< h3 phong cách = 'màu: đen; lề trái: -55%;' > Chào mừng đến với Linuxhint < / h3 >
< / div >
< hình ảnh src = '../book.jpg' chiều cao = 'năm mươi%' ; chiều rộng = 'năm mươi%' >

Sau khi thực thi, đầu ra mã trông như thế này:

Đầu ra cho thấy rằng văn bản đang có lề phải âm.

Sử dụng tài sản còn lại ký quỹ âm

Thuộc tính lề trái có giá trị âm hoạt động theo cách tương tự. Trong đoạn mã dưới đây, phần tử “

” di chuyển 50% sang bên trái theo hướng ngược lại với thuộc tính lề trái:

= 'màu nền: dodgerblue;' >

= 'màu: đen; lề trái: -50%;' > Chào mừng bạn đến với Linuxhint >
>
= '../book.jpg' chiều cao = 'năm mươi%' ; chiều rộng = 'năm mươi%' >

Đầu ra của đoạn mã trên là:

Đó là cách lề âm hoạt động trong CSS.

Tại sao lề-trên:-5 != lề-dưới:5?

Khi mà ' lề dưới: 5% ” được sử dụng, nó sẽ thêm một lề từ phía dưới về phía trung tâm của phần tử nhưng khi “ lề trên: -5% ” được sử dụng, nó thêm một lề 5% từ trên xuống nhưng theo hướng ngược lại (bên ngoài trang).

Phần kết luận

Trong CSS, lề âm hoạt động theo hướng ngược lại bằng cách gán giá trị lề. Nó di chuyển nội dung của phần tử theo hướng ra ngoài/bên ngoài trang. “Margin-top:-5″ không bằng “margin-bottom:5” vì cả hai giá trị thuộc tính đều di chuyển nội dung theo hướng ngược lại tương ứng với vị trí gốc. Bài viết này đã chứng minh thành công cách thức hoạt động của lợi nhuận âm.