CSS cho phép chúng ta kiểm soát khoảng cách quanh các cạnh riêng lẻ của một phần tử. Thuộc tính margin là viết tắt cho: margin-top, margin-right, margin-bottom và margin-left.
Cú pháp
Cú pháp của thuộc tính CSS margin như sau:
Selector { margin-top: /*giá trị*/ margin-right: /*giá trị*/ margin-bottom: /*giá trị*/ margin-left: /*giá trị*/ }
Các ví dụ sau minh họa thuộc tính CSS margin:
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { margin-left: auto; margin-bottom: 4em; width: 30%; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; outline: thin dotted; text-align: center; } div + div { margin-right: 30%; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 45%; margin-top: -190px; box-shadow: inset 0 0 6px orange; } </style> </head> <body> <div> Đây là văn bản demo </div> <div>Một (margin khác nhau)</div> <div>Hai (margin khác nhau)</div> </body> </html>
Kết quả
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> div { margin-top: 7%; margin-left: 25%; margin-bottom: -3em; width: 40px; height: 40px; padding: 0.6rem; box-shadow: inset 0 0 3px turquoise; border-top-right-radius: 100px; } div + div { margin-right: 30%; border-top-right-radius: unset; border-top-left-radius: 100px; box-shadow: inset 0 0 6px teal; } div + div + div { margin-left: 25%; margin-top: -140px; box-shadow: inset 0 0 6px orange; border-bottom-right-radius: 100px; } </style> </head> <body> <div></div> <div></div> <div></div> </body> </html>
Kết quả
