Margin là gì css

  -  

Đặc tính margin trong CSS được dùng làm chế tạo ra khoảng chừng White xung quanh bộ phận, bên ngoài các mặt đường viền. Các công dụng này vẫn đặt lề cho từng cạnh của thành phần (bên trên, dưới, trái, phải).

Bạn đang xem: Margin là gì css

Các cạnh của lề trong CSS

CSS bao gồm những tính năng khẳng định lề cho từng cạnh vào phần tử:

margin-topmargin-rightmargin-bottommargin-left

Tất cả những tính năng lề hoàn toàn có thể gồm những quý giá sau:

auto - trình xem xét từ tính tân oán lềlength - xác minh lề theo px, pt, cm…% - xác minh lề theo % đối với chiều rộng của phần tửinherit - xác minh lề thừa kế trường đoản cú phần tử mẹ

Có thể dùng quý hiếm âm. Ví dụ tiếp sau đây tạo thành lề không giống nhau mang lại 4 cạnh của phần tử :

p margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;
Đặc tính rút gọn của lề trong CSS

Để rút ít gọn gàng code, hoàn toàn có thể chuyển tất cả đặc tính lề vào trong 1 đặc tính margin nhất, cùng với các công dụng riêng:

margin-topmargin-rightmargin-bottommargin-left

Nếu công dụng margin tất cả 4 giá trị

margin: 25px 50px 75px 100px;lề trên 25pxlề đề nghị 50pxlề bên dưới 75pxlề trái 100pxp margin: 25px 50px 75px 100px;Nếu công năng margin tất cả 3 giá chỉ trị

margin: 25px 50px 75px;lề bên trên 25pxlề trái và buộc phải 50pxlề dưới 75pxp margin: 25px 50px 75px;Nếu tính năng margin bao gồm 2 giá bán trị

margin: 25px 50px;lề bên trên và dưới 25pxlề trái với phải 50pxp margin: 25px 50px;Nếu công năng margin có một giá chỉ trị

margin: 25px;toàn bộ những lề hầu như là 25pxp margin: 25px;Giá trị mang định

lúc đặt công dụng margin về giá trị auto, nó sẽ tự động hóa căn giữa phần tử theo hướng ngang. Phần tử chiếm phần phạm vi định sẵn, còn lại sẽ tiến hành phân tách phần nhiều đến lề trái cùng nên.

Xem thêm: Syll Là Gì - Cách Viết Sơ Yếu Lý Lịch Chuẩn

div width: 300px; margin: auto; border: 1px solid red;
Giá trị inherit (kế thừa)

lấy ví dụ này đặt lề trái của phần tự class=”ex1”> thừa kế trường đoản cú thành phần người mẹ là

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

Đôi khi lề bên trên và lề dưới của các bộ phận ck vào nhau thành một lề độc nhất vô nhị bằng kích thước của lề lớn hơn. Việc này chỉ xảy ra cùng với lề bên trên cùng dưới chứ không hề xẩy ra cùng với lề trái và nên.

Xem thêm: Log File Là Gì - Định Nghĩa Và Giải Thích Ý Nghĩa

h1 margin: 0 0 50px 0;h2 margin: 20px 0 0 0;Tại ví dụ trên, lề bên dưới của là 50px cùng lề trên của là 20px. Đôi khi phần lề giữa với vẫn là tổng của cả hai (Có nghĩa là 70px = 50px + 20px) nhưng vì bài toán gộp lề mà phần lề này chỉ là 50px.

Bài trước: Đường viền vào CSS

Bài sau: Padding vào CSS


5 ★ 1