Thuộc tính viết tắt margin trong CSS được dùng để định nghĩa khu vực margin cho một phần tử. Nó đặt giá trị theo chiều kim đồng hồ: 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: /*giá trị*/ }
Các ví dụ sau minh họa thuộc tính viết tắt CSS margin:
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { margin: 7% auto -3% 25%; width: 40px; height: 40px; padding: 0.9rem; box-shadow: inset 0 0 50px turquoise; border: thin solid; } div > div { border-top-right-radius: 100px; border-bottom-right-radius: 500px; border-top-left-radius: 30px; box-shadow: inset 0 0 6px navy; } div > div > div { padding: 0.3em; margin: 2px -40px; box-shadow: inset 0 0 16px orange; border-radius: 50%; } #one { padding: 50px; border-radius: 10px; } </style> </head> <body> <div id="one"> <div> <div></div> </div> </div> </body> </html>
Kết quả
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> article { margin: 2em 1em; background-color: bisque; } span { margin: -23% 83%; border-left: dashed; background-image: linear-gradient(to right, lightgreen, forestgreen); font-size: 1.4em; font-style: italic; } </style> </head> <body> <h2>Spring Framework là gì?</h2> <article> Spring framework là nền tảng Java mã nguồn mở. Nó ban đầu được viết bởi Rod Johnson và phát hành lần đầu dưới giấy phép Apache 2.0 vào tháng 6 năm 2003.<span> Spring nhẹ về kích thước và tính minh bạch. Phiên bản cơ bản của Spring framework khoảng 2MB.</span> </article> </body> </html>
Kết quả
