Bài 11: Cách sử dụng Margins trong css

Cách sử dụng Margins trong css

Thuộc tính margin trong CSS được sử dụng để tạo khoảng cách giữa các phần tử HTML. Bạn có thể sử dụng các giá trị của margin để tùy chỉnh khoảng cách theo các hướng khác nhau, ví dụ như margin-top, margin-right, margin-bottom và margin-left. Dưới đây là một số cách sử dụng margin:

1. Margin cho tất cả các hướng:

div {
  margin: 10px;
}

Trong ví dụ trên, phần tử <div> sẽ có khoảng cách bằng 10px với các phần tử xung quanh theo tất cả các hướng.

2. Margin cho từng hướng:

div {
  margin-top: 10px;
  margin-right: 5px;
  margin-bottom: 15px;
  margin-left: 20px;
}

Trong ví dụ trên, phần tử <div> sẽ có khoảng cách 10px với phần tử trên, 5px với phần tử bên phải, 15px với phần tử dưới và 20px với phần tử bên trái.

3. Margin âm:

div {
  margin-top: -10px;
}

Trong ví dụ trên, phần tử <div> sẽ có khoảng cách âm 10px với phần tử trên nó. Kỹ thuật này có thể được sử dụng để tạo ra các hiệu ứng chồng lên giữa các phần tử.

Bạn có thể sử dụng các giá trị khác nhau của margin để tạo ra khoảng cách tùy chỉnh giữa các phần tử HTML của mình.