Canh Lề

Thuộc Tính Margin

Thuộc tính margin trong CSS được sử dụng để canh lề cho phần tử bằng cách tạo khoảng trống bắt đầu tính từ đường viền hướng ra ngoài.

p {
    margin: 5px 10px 5px 10px;
}

Đoạn mã ở trên tạo lề trên, lề phải, lề dưới và lề trái cho phần tử p lần lượt là 5px, 10px, 5px10px.

Chúng ta cũng có thể tạo lề riêng lẻ cho từng phía khác nhau của phần tử.

Canh Lề Riêng Lẻ

Bạn có thể canh lề riêng lẻ theo từng phía cho phần tử sử dụng một hoặc nhiều thuộc tính sau:

  • Thuộc tính margin-top: Tạo lề trên cho phần tử.
  • Thuộc tính margin-right: Tạo lề phải cho phần tử.
  • Thuộc tính margin-bottom: Tạo lề dưới cho phần tử.
  • Thuộc tính margin-left: Tạo lề trái cho phần tử.

Ví dụ:

p {
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-left: 5px;
}

Cú Pháp Nhanh

Theo cách thông thường thuộc tính margin được dùng để tạo tất cả 4 lề cho phần tử bằng cách liệt kê giá trị của từng lề:

p {
    margin: 5px 10px 5px 10px;
}

Tuy nhiên margin còn có thể được sử dụng để canh lề theo cú pháp nhanh. Ví dụ như sau:

  • margin: 5px 10px: Tạo cả 4 lề trên, lề phải, lề dưới và lề trái với giá trị lần lượt là 5px, 10px, 5px10px.
  • margin: 5px 10px 5px: Tạo lề trên, lề phải và lề dưới lần lượt là 5px, 10px5px (không bao gồm lề trái).
  • margin: 5px: Tạo cả 4 lề trên, dưới, phải, trái với cùng giá trị là 5px.

Canh Lề Tự Động

Khi sử dụng giá trị auto cho thuộc tính margin thì phần tử sẽ được canh lề tự động. Đối với những phần tử kiểu block (hoặc inline-block) thì khi sử dụng giá trị auto, phần tử sẽ được canh đều trái, phải, trên, so với phần tử mẹ chứa chúng.

div {
    width: 100px;
    border: 2px solid #333;
    margin: auto;
}
Thêm Bình Luận: