Hướng Dẫn Cách Cài Đặt Lề Cho Các Phần Tử Trong CSS

Margin trong CSS được sử dụng để tạo khoảng trắng xung quanh phần tử và bên ngoài các đường viền của phần tử đó. Đặc tính này áp dụng cho các cạnh trên, dưới, trái và phải của phần tử.

Các Đặc Tính Margin Trong CSS

• margin-top: Cài đặt lề trên của phần tử.
• margin-right: Cài đặt lề phải của phần tử.
• margin-bottom: Cài đặt lề dưới của phần tử.
• margin-left: Cài đặt lề trái của phần tử.

Giá Trị Margin

Các giá trị có thể sử dụng cho các thuộc tính margin là:

1. auto: Trình duyệt tự động tính toán giá trị lề. Thường được dùng để căn giữa phần tử theo chiều ngang.
2. inherit: Lề sẽ được kế thừa từ phần tử cha.
3. length: Xác định chiều rộng của lề bằng các đơn vị như px, pt, cm, vv...
4. %: Xác định chiều rộng của lề theo tỷ lệ phần trăm của chiều rộng phần tử cha.

Cách Sử Dụng Margin Để Tạo Lề Cho 4 Cạnh

Ví dụ:

css
p {
  margin-top: 35px;
  margin-bottom: 35px;
  margin-right: 15px;
  margin-left: 15px;
}

Ở đây, chúng ta có thể đặt giá trị cho từng cạnh một cách cụ thể. Tuy nhiên, để rút gọn mã CSS, bạn có thể dùng một thuộc tính margin duy nhất cho tất cả các cạnh.

Cú Pháp Rút Gọn Của Margin

1. 4 giá trị: Cú pháp margin: top right bottom left;

   Ví dụ:

   css
   p {
     margin: 15px 25px 15px 25px;
   }
   

   • Lề trên: 15px
   • Lề phải: 25px
   • Lề dưới: 15px
   • Lề trái: 25px

2. 3 giá trị: Cú pháp margin: top right-left bottom;

   Ví dụ:

   css
   p {
     margin: 25px 50px 75px;
   }
   

   • Lề trên: 25px
   • Lề phải và trái: 50px
   • Lề dưới: 75px

3. 2 giá trị: Cú pháp margin: top-bottom right-left;

   Ví dụ:

   css
   p {
     margin: 25px 50px;
   }
   

   • Lề trên và dưới: 25px
   • Lề phải và trái: 50px

4. 1 giá trị: Cú pháp margin: all;

   Ví dụ:

   css
   p {
     margin: 25px;
   }
   

   • Tất cả các lề (trên, dưới, trái, phải): 25px

Giá Trị Mặc Định

Khi đặt margin: auto, trình duyệt sẽ tự động tính toán để căn giữa phần tử theo chiều ngang. Phần tử sẽ chiếm chiều rộng đã định, và phần còn lại sẽ được chia đều giữa lề trái và phải.

Ví dụ:

css
div {
  width: 250px;
  margin: auto;
  border: 1px solid red;
}

Giá Trị Inherit (Kế Thừa)

Giá trị inherit giúp phần tử kế thừa lề từ phần tử cha. Ví dụ, bạn có thể kế thừa lề từ một phần tử cha như sau:

css
div {
  border: 1px solid red;
  margin-left: 30px;
}

p.post-snippet {
  margin-left: inherit;
}

Lề Chồng Lên (Collapsing Margins)

Một điểm cần lưu ý là khi lề trên và lề dưới của các phần tử chồng lên nhau, chúng sẽ hợp nhất thành một lề duy nhất, có kích thước bằng lề lớn hơn trong hai lề. Điều này chỉ xảy ra với lề trên và dưới, không xảy ra với lề trái và phải.

Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng margin trong CSS và cách áp dụng các kỹ thuật để quản lý không gian giữa các phần tử.