Margin trong CSS

Thuộc tính CSS margin được sử dụng để tạo không gian xung quanh các phần tử, nằm bên ngoài đường viền border của phần tử.

Phần tử này có margin 70px.

Xem ví dụ

CSS Margin

Thuộc tính CSS margin được sử dụng để tạo không gian xung quanh các phần tử, nằm bên ngoài các đường border đã được xác định.

Với CSS margin, chúng ta có toàn quyền kiểm soát không gian xung quanh các phần tử. Có các thuộc tính margin riêng lẻ để đặt lề cho mỗi bên của một phần tử (top, right, bottom và left).

Chúng ta có bốn thuộc tính margin mở rộng như sau:

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

Tất cả các thuộc tính margin đều có thể có các giá trị như sau:

• auto - trình duyệt tự động tính toán và căn lề
• length - chỉ định lề bằng px, pt, cm, v.v.
• % - chỉ định lề tính bằng % căn theo chiều rộng của phần tử chứa nó
• inherit - chỉ định căn lề được kế thừa từ phần tử cha

<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>

CSS Margin - Viết tắt

Để rút ngắn mã, chúng ta có thể chỉ định tất cả các thuộc tính margin vào trong một thuộc tính margin.

Giả sử chúng ta có các thuộc tính margin riêng lẻ như sau:

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

Chúng ta viết lại thuộc tính CSS với bốn giá trị như trên.

• margin: 25px 50px 75px 100px;
  • margin-top là 25px
  • margin-right là 50px
  • margin-bottom là 75px
  • margin-left là 100px

<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>

Nếu thuộc tính margin có ba giá trị.

• margin: 25px 50px 75px;
  • margin-top là 25px
  • margin-right và margin-right là 50px
  • margin-bottom là 75px

<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>

Nếu thuộc tính margin có hai giá trị.

• margin: 25px 50px;
  • margin-top và margin-bottom là 25px
  • margin-right và margin-right là 50px

<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>

Nếu thuộc tính margin có một giá trị.

• margin: 25px;
  • margin-top, margin-bottom, margin-left, margin-right là 25px

<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>

CSS Margin - Giá trị tự động

Chúng ta có thể đặt thuộc tính margin thành auto, trình duyệt sẽ tự động căn giữa theo chiều ngang của phần tử bên trong vùng chứa của nó.

Khi đó, phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa lề trái và lề phải.

<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>

CSS Margin - Giá trị kế thừa

Chúng ta có thể đặt giá trị thuộc tính margininherit để nó kế thừa các thuộc tính margin đã được đặt ở phần tử cha (phần tử chứa nó).

<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>

CSS Margin - Hiệu ứng thu gọn margin

Lề trên và lề dưới của các phần tử đôi khi được thu gọn thành một lề duy nhất bằng phần tử có lề lớn nhất trong hai lề của hai phần tử.

Việc thu gọn này không áp dụng cho lề trái và lề phải! Chỉ hoạt động cho lề trên và dưới!

<style>
h1 {
  margin: 0 0 50px 0;
  border: 1px solid blue;
}

h2 {
  margin: 20px 0 0 0;
  border: 1px solid green;
}
</style>

Trong ví dụ trên, phần tử <h1> có lề dưới là 50px và phần tử <h2> có lề trên được đặt thành 20px.

Thông thường, khoảng không gian ở giữa 2 phần tử <h1> và <h2> sẽ có tổng cộng là 70px (50px + 20px). Nhưng do hiệu ứng margin bị thu hẹp, nên margin thực tế cuối cùng là 50px (trình duyệt lấy theo margin-bottom của phần tử <h1>).