Margin Css Là Gì

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

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

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

CSS tất cả những tính năng khẳng định lề mang lại từng cạnh trong phần tử:

margin-topmargin-rightmargin-bottommargin-left

Tất cả các công dụng lề hoàn toàn có thể bao gồm các quý giá sau:

tự động - trình duyệt y từ tính toán thù lềlength - xác định lề theo px, pt, cm…% - xác định lề theo % so 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ể cần sử dụng cực hiếm âm. ví dụ như sau đây tạo ra lề khác nhau đến 4 cạnh của bộ phận :

p margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px;
Đặc tính rút ít gọn gàng 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ông dụng lề vào một trong những đặc tính margin tốt nhất, với các đặc tính riêng:

margin-topmargin-rightmargin-bottommargin-left

Nếu tính năng margin tất cả 4 giá bán trị

margin: 25px 50px 75px 100px;lề trên 25pxlề nên 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á trị

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

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

margin: 25px;toàn bộ các lề mọi là 25pxp margin: 25px;Giá trị khoác định

Khi đặt công dụng margin về cực hiếm tự động hóa, nó vẫn auto cnạp năng lượng thân phần tử theo hướng ngang. Phần tử chiếm phần phần độ rộng định sẵn, sót lại sẽ tiến hành phân tách đa số mang đến lề trái và nên.

Xem thêm: Kết Luận Bất Ngờ Vụ "Con Trai Ông Phạm Nhật Hoàng Và Bạn Gái

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

lấy ví dụ như này đặt lề trái của phần tự class=”ex1”> kế thừa từ bộ phận chị em là

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

Thông thường lề trên cùng lề bên dưới của những phần tử ông xã sát vào nhau thành một lề độc nhất bằng form size của lề to 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 cần xảy ra cùng với lề trái và bắt buộc.

h1 margin: 0 0 50px 0;h2 margin: 20px 0 0 0;Ở ví dụ trên, lề bên dưới của là 50px với lề trên của là 20px. Đôi khi phần lề thân và đang là tổng của cả hai (tức là 70px = 50px + 20px) mà lại vì vấn đề gộp lề mà phần lề này chỉ cần 50px.

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

Bài sau: Padding trong CSS


5 ★ 1