CSS Margin: Tạo Khoảng Cách Giữa Các Phần Tử

Việc thêm khoảng trống giữa các phần tử trên trang web là một phần quan trọng trong thiết kế trải nghiệm người dùng thẩm mỹ và chức năng. Thuộc tính margin trong CSS được dùng để tạo ra một vùng trống xung quanh phần tử HTML, giúp tách biệt phần tử đó với các đối tượng khác trên trang.

Tìm Hiểu Về CSS Margin

Thuộc tính margin trong CSS tạo khoảng không gian xung quanh phần tử. Khoảng không gian này giúp bạn dễ dàng tách biệt các phần tử khác nhau trên trang web, bên ngoài bất kỳ viền (border) nào.

Trong CSS, margin là viết tắt của bốn thuộc tính con dùng để thiết lập lề trên, phải, dưới và trái cho một phần tử web.

Mọi phần tử trên trang web đều bao gồm một hoặc nhiều hộp (box). Các phần tử sử dụng mô hình hộp (box model) để xác định cách hộp được hiển thị. Margin là một trong những thành phần chính của box model và nằm ở lớp ngoài cùng.

Trong hướng dẫn này, chúng ta tập trung vào thuộc tính margin. Nếu bạn muốn tìm hiểu thêm về các thành phần khác của box model, hãy đọc các bài viết về CSS border và padding.

Thiết Lập Margin Cho Từng Bên Riêng Lẻ

Các thuộc tính sau được dùng để thiết lập margin cho từng cạnh của phần tử:

• margin-top
• margin-right
• margin-bottom
• margin-left

Mỗi thuộc tính chấp nhận một trong bốn loại giá trị sau:

• length: Chỉ định margin bằng px, em, rem hoặc đơn vị độ dài CSS khác.
• percentage (%): Chỉ định margin theo phần trăm chiều rộng của phần tử chứa.
• auto: Trình duyệt tự động tính toán margin.
• inherit: Kế thừa margin từ phần tử cha.

Ví Dụ: Margin Từng Cạnh

Giả sử chúng ta thiết kế một hộp với các margin: trên 50px, trái 30px, phải 40px, dưới 40px.

/* HTML */
<div class="outer">
  <p class="box">This is a box.</p>
</div>

/* CSS */
.box {
  margin-top: 50px;
  margin-left: 30px;
  margin-right: 40px;
  margin-bottom: 40px;
  border: 1px solid red;
}
.outer {
  border: 1px solid blue;
}

Hộp bên trong (lớp box) có viền đỏ, hộp ngoài (lớp outer) có viền xanh. Khoảng cách giữa hai viền chính là margin đã thiết lập.

Viết Tắt Margin (Shorthand)

Thay vì viết 4 dòng cho 4 cạnh, bạn có thể dùng thuộc tính margin viết tắt trên một dòng. Số lượng giá trị xác định cách áp dụng:

4 Giá Trị

Thứ tự: trên → phải → dưới → trái (theo chiều kim đồng hồ).

.box {
  margin: 25px 25px 50px 60px;
  border: 1px solid red;
}

3 Giá Trị

Thứ tự: trên → phải & trái → dưới.

.box {
  margin: 50px 25px 60px;
  border: 1px solid red;
}

Lề trái và phải đều là 25px; trên 50px, dưới 60px.

2 Giá Trị

Thứ tự: trên & dưới → phải & trái.

.box {
  margin: 50px 30px;
  border: 1px solid red;
}

Margin dọc (trên/dưới) 50px, margin ngang (trái/phải) 30px.

1 Giá Trị

Áp dụng cùng một giá trị cho cả 4 cạnh.

.box {
  margin: 50px;
  border: 1px solid red;
}

Giá Trị Inherit

Giá trị inherit cho phép phần tử con kế thừa margin từ phần tử cha. Điều này rất hữu ích: khi margin của cha thay đổi, margin của con tự động cập nhật.

.box {
  margin-left: inherit;
  border: 1px solid red;
}
.outer {
  margin-left: 50px;
  border: 1px solid blue;
}

Hộp con kế thừa margin-left 50px từ hộp cha.

Giá Trị Auto - Căn Giữa Ngang

Giá trị auto thường dùng để căn giữa phần tử theo chiều ngang trong container.

Công thức: (Chiều rộng container - Chiều rộng phần tử) / 2

Ví dụ: Container 500px, hộp con 250px → margin trái/phải = (500-250)/2 = 125px.

/* HTML */
<div class="outer">
  <p class="box">This is a box.</p>
</div>

/* CSS */
.box {
  width: 250px;
  margin: auto;
  border: 1px solid red;
}
.outer {
  width: 500px;
  border: 1px solid blue;
}

Hộp con được căn giữa ngang. Không có margin trên/dưới vì không chỉ định.

Kết Luận

Thuộc tính CSS margin tạo khoảng không gian giữa viền của phần tử và các phần tử khác. Bạn đã học cách dùng margin và 4 thuộc tính con để kiểm soát khoảng cách chính xác. Hãy áp dụng vào dự án thực tế để thành thạo!