Bài 13: Thuộc tính margin trong CSS
Cập nhật lần cuối vào ngày 24/11/2024
Margin là gì?
Margin là thuộc tính CSS được sử dụng để tạo khoảng cách xung quanh một phần tử, nằm ở bên ngoài đường viền (border). Nó giúp tạo khoảng trống giữa các phần tử với nhau.
Trong bài này có
Cú pháp cơ bản
/* Cú pháp đầy đủ */ margin: top right bottom left; /* Cú pháp rút gọn */ margin: top/bottom left/right; margin: all;
Các giá trị của margin
1. Giá trị số:
margin: 10px; /* Pixels */ margin: 1em; /* Em */ margin: 1rem; /* Root em */
2. Giá trị phần trăm:
margin: 10%;
3. Giá trị auto:
margin: auto; /* Căn giữa phần tử */
4. Giá trị âm:
margin: -10px;
Các thuộc tính riêng lẻ
margin-top: 10px; /* Margin phía trên */ margin-right: 20px; /* Margin phía phải */ margin-bottom: 15px; /* Margin phía dưới */ margin-left: 25px; /* Margin phía trái */
Cách viết rút gọn
1. 4 giá trị: top, right, bottom, left
margin: 10px 20px 15px 25px;
2. 3 giá trị: top, left/right, bottom
margin: 10px 20px 15px;
3. 2 giá trị: top/bottom, left/right
margin: 10px 20px;
4. 1 giá trị: áp dụng cho tất cả các cạnh
margin: 10px;
Ví dụ thực tế
1. Căn giữa phần tử:
.center-element { width: 300px; margin: 0 auto; }
2. Tạo khoảng cách giữa các phần tử:
.blog-post { margin-bottom: 20px; }
3. Loại bỏ margin mặc định:
body { margin: 0; }
Lưu ý quan trọng
1. Margin collapse
Khi hai margin dọc tiếp xúc nhau, chúng sẽ gộp lại thành một margin có giá trị bằng margin lớn nhất.
.element1 { margin-bottom: 20px; } .element2 { margin-top: 30px; } /* Khoảng cách thực tế sẽ là 30px, không phải 50px */
2. Margin với phần tử inline:
- Margin top và bottom không ảnh hưởng đến phần tử inline
- Chỉ margin left và right có tác dụng
3. Margin âm:
- Có thể sử dụng để kéo phần tử ra khỏi vị trí bình thường
- Thường dùng trong các layout phức tạp
Ví dụ thực tế nâng cao
1. Grid Layout với margin:
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .grid-item { margin: 10px; }
2. Responsive margin:
.container { margin: 20px; } @media (min-width: 768px) { .container { margin: 40px; } }
Kết luận
Margin là một thuộc tính CSS cơ bản nhưng rất quan trọng trong việc tạo layout và khoảng cách giữa các phần tử. Hiểu và sử dụng margin đúng cách sẽ giúp bạn:
- Tạo layout chuyên nghiệp
- Cải thiện khả năng đọc của nội dung
- Tối ưu hóa trải nghiệm người dùng
Bạn cần thực hành nhiều để nắm vững cách sử dụng margin trong các tình huống khác nhau.
Bình luận