Margins là phần không gian nằm xung quanh các phần tử và nằm bên ngoài đường viền (border)
Với CSS, bạn có thể xác định độ rộng của margins bằng các cách sau:
- CSS các mặt riêng lẻ
- Gán giá trị tự động
- Giá trị kế thừa
Tất cả các thuộc tính margins có thể xác định bằng các giá trị sau:
- auto – trình duyệt sẽ tự động tính toán
- length – chỉ định lề bằng px, pt, cm, v.v.
- % – chỉ định lề tính bằng % chiều rộng của phần tử chứa
- inherit – chỉ định margins được kế thừa từ phần tử mẹ
Lưu ý: bạn cũng có thể sử dụng giá trị âm
1.CSS các mặt riêng lẻ
Để tùy chỉnh độ rộng margins của các mặt riêng lẻ ta sử dụng các thuộc tính:
- margin-top (phía trên)
- margin-right (phía bên phải)
- margin-bottom (phía dưới)
- margin-left (phía bên trái)
Ví dụ:
Bạn cũng có thể rút ngắn câu lệnh và sử dụng trong một câu lệnh duy nhất bằng cách sử dụng thuộc tính margin
Ví dụ:
2.Gán giá trị tự động
Bạn có thể đặt thuộc tính thành auto
Khi đó, phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa lề trái và lề phải
Ví dụ:
3.Giá trị kế thừa
Giá trị kế thừa là giá trị mà phần tử con được kế thừa từ phần tử mẹ bằng cách sử dụng giá trị inherit
Ví dụ:
Ở đây, thuộc tính của phần tử con <p> được kế thừa từ phần tử mẹ <div>
