Thuộc tính Margin trong CSS

CSS Margins

Thuộc tính CSS Margin được sử dụng để tạo không gian xung quanh các phần tử. Các thuộc tính Margin thiết lập kích thước của không gian trắng bên ngoài đường viền.

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

Margin – Căn lề hai bên

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
• margin-left

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

• auto – trình duyệt tự căn lề
• length – căn lề bằng px, pt, cm, v.v …
• % – căn lề theo % chiều rộng của phần tử bên trong
• inherit – căn lề dựa trên thuộc tính của phần tử trước đó

Lưu ý: giá trị margin có thể là số âm.

Ví dụ sau đặt lề khác nhau cho cả bốn phía của một phần tử <p>:

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

Margin – viết gọn thuộc tính

Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính căn lề chỉ trong một thuộc tính. Thuộc tính căn lề là thuộc tính viết gọn cho các thuộc tính riêng lẻ sau:

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

p {
    margin: 100px 150px 100px 80px;
}

Dưới đây là cách các thuộc tính trên hoạt động:

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

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

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

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

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

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

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

• margin: 25px;
  • căn cả lề trên, dưới, trái, phải là 25px

Giá trị auto

Bạn có thể thiết lập thuộc tính margin tự động để căn giữa các phần tử bên trong. Chiều rộng của phần tử này được chỉ định và khoảng trống còn lại sẽ phân chia bằng nhau giữa lề trái và lề phải:

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

Giá trị inherit

Ví dụ này cho phép lề trái được sử dụng thuộc tính phần tử bên ngoài nó:

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

p.one {
    margin-left: inherit;
}

Thuộc tính margin thu gọn

Lề trên và dưới của các phần tử đôi khi bị thu gọn thành một lề duy nhất bằng với lề lớn nhất của hai lề đó. Điều này chỉ áp dụng cho lề trên và dưới, không áp dụng cho lề trái và phải.

h1 {
    margin: 0 0 50px 0;
}

h2 {
    margin: 20px 0 0 0;
}

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

Đoạn mã trên có vẻ như xác định khoảng cách dọc giữa <h1> và <h2> sẽ là tổng cộng 70px (50px + 20px). Nhưng do sự thu gọn của lề, kích thước lề sẽ bằng 50px.

Tất cả thuộc tính margin CSS