Lề được sử dụng để tạo không gian xung quanh các phần tử, bên ngoài bất kỳ đường viền xác định nào.

CSS Margins

Thuộc tính lề CSS được sử dụng để tạo khoảng trống xung quanh các phần tử, bên ngoài bất kỳ đường viền được xác định nào.

Với CSS, bạn có toàn quyền kiểm soát lề. Có các thuộc tính để đặt lề cho mỗi cạnh của một phần tử (trên, phải, dưới và trái).

Margin – Individual Sides

CSS có các thuộc tính để xác định lề cho mỗi cạnh của một phần tử:

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

Tất cả các thuộc tính lề có thể có các giá trị sau:

auto – trình duyệt tính toán mức ký quỹ
length – chỉ định lề bằng px, pt, cm, v.v.
% – chỉ định lề tính bằng % chiều rộng của phần tử chứa
inherit – chỉ định rằng lề phải được kế thừa từ phần tử cha

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin – Shorthand Property

Để rút ngắn mã, có thể chỉ định tất cả các thuộc tính lề trong một thuộc tính.

Thuộc tính lề là thuộc tính viết tắt của các thuộc tính lề riêng lẻ sau:

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

Vì vậy, đây là cách nó hoạt động:

Nếu thuộc tính lề có bốn giá trị:

lề: 25px 50px 75px 100px;
lề trên là 25px
lề phải là 50px
lề dưới là 75px
lề trái là 100px

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

Nếu thuộc tính lề có ba giá trị:

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

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

Nếu thuộc tính lề có hai giá trị:

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

p {
  margin: 25px 50px;
}

Nếu thuộc tính lề có một giá trị:

lề: 25px;
tất cả bốn lề đều là 25px

p {
  margin: 25px;
}

The auto Value

Bạn có thể đặt thuộc tính lề thành tự động để căn giữa phần tử theo chiều ngang trong vùng chứa của nó.

Phần tử sau đó sẽ chiếm chiều rộng được chỉ định và khoảng trống còn lại sẽ được chia đều cho lề trái và lề phải.

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

The inherit Value

Ví dụ này cho phép kế thừa lề trái của phần tử
từ phần tử <p class=”ex1″> cha (<div>):

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

p.ex1 {
  margin-left: inherit;
}

All CSS Margin Properties

Property	Description
margin	A shorthand property for setting all the margin properties in one declaration
margin-bottom	Sets the bottom margin of an element
margin-left	Sets the left margin of an element
margin-right	Sets the right margin of an element
margin-top	Sets the top margin of an element