Mặt ngoài CSS

Cạnh ngoài của phần tử này là 70px.

Try It Yourself

Mặt ngoài CSS

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

Thông qua CSS, bạn có thể kiểm soát hoàn toàn cạnh ngoài. Có một số thuộc tính có thể được sử dụng để đặt cạnh ngoài của mỗi bên (trên, phải, dưới và trái) của phần tử.

Cạnh ngoài - Cạnh riêng lẻ

CSS có các thuộc tính để chỉ định cạnh ngoài cho mỗi bên của phần tử:

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

Tất cả các thuộc tính cạnh ngoài đều có thể đặt các giá trị sau:

  • auto - Trình duyệt tính toán cạnh ngoài
  • length - Đặt cạnh ngoài bằng đơn vị px, pt, cm, v.v.
  • % - Đặt cạnh ngoài bằng phần trăm chiều rộng của phần tử bao gồm
  • inherit - Đặt để kế thừa cạnh ngoài từ phần tử cha

Lưu ý:Cho phép giá trị âm.

Example

Đặt các cạnh ngoài khác nhau cho tất cả bốn cạnh của phần tử <p>:

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

Try It Yourself

Thuộc tính viết tắt Margin

Để rút gọn mã, có thể chỉ định tất cả các thuộc tính cạnh ngoài trong một thuộc tính.

margin Thuộc tính là viết tắt của các thuộc tính cạnh ngoài sau:

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

Cơ chế hoạt động của nó như sau:

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

  • margin: 25px 50px 75px 100px;
    • Cạnh ngoài trên là 25px
    • Cạnh ngoài phải là 50px
    • Cạnh ngoài dưới là 75px
    • Cạnh ngoài trái là 100px

Example

Thuộc tính viết tắt margin đã đặt bốn giá trị:

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

Try It Yourself

Nếu margin Thuộc tính đã đặt ba giá trị:

  • margin: 25px 50px 75px;
    • Cạnh ngoài trên là 25px
    • Cạnh ngoài phải và trái là 50px
    • Cạnh ngoài dưới là 75px

Example

Sử dụng thuộc tính viết tắt margin đã đặt ba giá trị:

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

Try It Yourself

Nếu margin Thuộc tính đã đặt hai giá trị:

  • margin: 25px 50px;
    • Cạnh ngoài trên và dưới là 25px
    • Cạnh ngoài phải và trái là 50px

Example

Sử dụng thuộc tính viết tắt margin đã đặt hai giá trị:

p {
  margin: 25px 50px;
}

Try It Yourself

Nếu margin Thuộc tính đã đặt một giá trị:

  • margin: 25px;
    • Bốn cạnh ngoài đều là 25px

Example

Sử dụng thuộc tính viết tắt margin để đặt một giá trị:

p {
  margin: 25px;
}

Try It Yourself

Giá trị auto

You can set the margin property to auto, so that the element is centered horizontally within its container.

Then, the element will occupy the specified width, and the remaining space will be evenly distributed between the left and right boundaries.

Example

Use margin: auto:

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

Try It Yourself

Inherit Value

This example makes the left margin of the <p class="ex1"> element inherit from the parent element (<div>):

Example

Use inherit value:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Try It Yourself

Further Reading

Extra Book:Box Model: CSS Margin