Bài 13: Thuộc tính margin trong CSS

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.

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.