Thuộc tính lề CSS

margin là một thuộc tính CSS đơn giản có cú pháp viết tắt mà tôi quên mất, vì vậy tôi đã viết bài đăng tham khảo này

CácmarginThuộc tính CSS thường được sử dụng trong CSS để thêm không gian xung quanh một phần tử.

Nhớ lại:

  • marginthêm không gian bên ngoài đường viền phần tử
  • paddingthêm không gian bên trong đường viền phần tử

Thuộc tính ký quỹ cụ thể

margincó 4 thuộc tính liên quan làm thay đổi lề của một cạnh cùng một lúc:

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

Cách sử dụng chúng rất đơn giản và không thể nhầm lẫn, ví dụ:

margin-left: 30px;
margin-right: 3em;

Sử dụngmargintốc ký

marginlà cách viết tắt để chỉ định nhiều lề cùng một lúc và tùy thuộc vào số lượng giá trị được nhập, nó hoạt động khác nhau.

1 giá trị

Sử dụng một giá trị duy nhất sẽ áp dụng chotất cảlề: trên, phải, dưới, trái.

margin: 20px;

2 giá trị

Sử dụng 2 giá trị sẽ áp dụng giá trị đầu tiên chodưới cùng và trên cùng, và thứ hai tớitrái phải.

margin: 20px 10px;

3 giá trị

Việc sử dụng 3 giá trị sẽ áp dụng giá trị đầu tiên chohàng đầu, thứ hai đểtrái phải, thứ ba đếnđáy.

margin: 20px 10px 30px;

4 giá trị

Việc sử dụng 4 giá trị sẽ áp dụng giá trị đầu tiên chohàng đầu, thứ hai đểđúng, thứ ba đếnđáy, thứ tư đếntrái.

margin: 20px 10px 5px 0px;

Vì vậy, đơn đặt hàng làtrên-phải-dưới-trái.

Giá trị được chấp nhận

marginchấp nhận các giá trị được biểu thị bằng bất kỳ loại đơn vị độ dài nào, các giá trị phổ biến nhất là px, em, rem, nhưngnhiều người khác tồn tại.

Nó cũng chấp nhận giá trị phần trăm và giá trị đặc biệtauto.

Sử dụngautotrung tâm các yếu tố

autocó thể được sử dụng để yêu cầu trình duyệt tự động chọn một lề và nó thường được sử dụng nhất để căn giữa một phần tử theo cách này:

margin: 0 auto;

As said above, using 2 values applies the first to bottom & top, and the second to left & right.

The modern way to center elements is to use Flexbox, and its justify-content: center; directive.

Older browsers of course do not implement Flexbox, and if you need to support them margin: 0 auto; is still a good choice.

Using a negative margin

margin is the only property related to sizing that can have a negative value. It’s extremely useful, too. Setting a negative top margin makes an element move over elements before it, and given enough negative value it will move out of the page.

A negative bottom margin moves up the elements after it.

A negative right margin makes the content of the element expand beyond its allowed content size.

A negative left margin moves the element left over the elements that precede it, and given enough negative value it will move out of the page.

Download my free CSS Handbook


More css tutorials: