Rate this post

margin trong CSS là thuộc tính để tạo ra một khoảng trắng xung quanh một thành phần HTML. Nó có thể được sử dụng để tạo ra khoảng cách giữa các thành phần trong một trang web hoặc để tạo ra khoảng trắng xung quanh một thành phần để tạo ra một khoảng trắng nền.

Các bài viết liên quan:

Các giá trị của margin có thể là:

  • Số pixel: Ví dụ: margin: 10px;
  • Tỷ lệ phần trăm: Ví dụ: margin: 10%;
  • Giá trị từ khóa: Ví dụ: margin: auto;
  • Giá trị riêng biệt cho mỗi mặt: Ví dụ: margin: 10px 20px 30px 40px; (trên, phải, dưới, trái)

Ví dụ:

/* Tạo khoảng cách 20px từ mọi mặt */
div {
  margin: 20px;
}

/* Tạo khoảng cách riêng biệt từ mỗi mặt */
p {
  margin: 10px 20px 30px 40px;
}

/* Tạo khoảng cách từ trên và dưới là 10px, từ trái và phải là auto*/
img {
  margin: 10px auto;
}

Lưu ý: margin là một thuộc tính non-collapsing, nghĩa là nó sẽ không gặp nhau với nhau, mỗi thành phần sẽ có một khoảng cách riêng biệt mà không bị giảm bớt.

còn nữa ko

Không, đó là những gì tôi biết về margin trong CSS. Nếu bạn có thêm câu hỏi khác, hãy hỏi tôi nhé.

Một số ví dụ margin trong css

Dưới đây là một số ví dụ về cách sử dụng thuộc tính margin trong CSS:

  1. Tạo một khoảng cách 20px từ mọi mặt của thành phần:
div {
  margin: 20px;
}
  1. Tạo một khoảng cách riêng biệt từ mỗi mặt của thành phần:
p {
  margin: 10px 20px 30px 40px; /* trên, phải, dưới, trái */
}
  1. Tạo một khoảng cách từ trên và dưới là 10px, từ trái và phải là auto:
img {
  margin: 10px auto;
}
  1. Tạo một khoảng cách bằng một tỷ lệ phần trăm:
section {
  margin: 5%;
}
  1. Tạo một khoảng cách từ trên là auto và các mặt khác là 20px:
div {
  margin: auto 20px 20px 20px; /* trên, phải, dưới, trái */
}
  1. Tạo một khoảng cách riêng biệt cho mỗi mặt sử dụng các thuộc tính margin-top, margin-right, margin-bottom, margin-left
p {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  margin-left: 25px;
}

Lưu ý: Các ví dụ trên chỉ là một số ví dụ cơ bản về việc sử dụng thuộc tính margin trong CSS, bạn có thể sử dụng nó theo cách khác nhau để đạt được hiệu quả thi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now