Cách Sử Dụng Margin Trong Css

Đặc tính margin trong CSS được dùng để sinh sản khoảng trắng xung quanh thành phần, bên ngoài các con đường viền. Các đặc tính này sẽ đặt lề mang đế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: Cách sử dụng margin trong css

Các cạnh của lề vào CSS

CSS bao gồm những công năng xác định lề mang lại từng cạnh trong phần tử:

margin-topmargin-rightmargin-bottommargin-left

Tất cả các đặc tính lề rất có thể có các quý giá sau:

tự động hóa - trình phê chuẩn trường đoản cú tính tân oán lềlength - xác minh lề theo px, pt, cm…% - khẳng định lề theo % so với chiều rộng lớn của phần tửinherit - xác định lề kế thừa từ bỏ bộ phận mẹ

cũng có thể cần sử dụng quý giá âm. lấy một ví dụ tiếp sau đây chế tác lề không giống nhau cho 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 gọn của lề vào CSS

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

margin-topmargin-rightmargin-bottommargin-left

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

margin: 25px 50px 75px 100px;lề bên trên 25pxlề yêu cầu 50pxlề bên dưới 75pxlề trái 100pxp margin: 25px 50px 75px 100px;Nếu công năng margin gồm 3 giá chỉ trị

margin: 25px 50px 75px;lề bên trên 25pxlề trái với đề nghị 50pxlề bên dưới 75pxp margin: 25px 50px 75px;Nếu đặc tính margin có 2 giá trị

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

margin: 25px;tất cả các lề đông đảo là 25pxp margin: 25px;Giá trị khoác định

Lúc đặt tính năng margin về quý giá tự động, nó vẫn tự động cnạp năng lượng giữa thành phần theo hướng ngang. Phần tử chiếm phần phần độ rộng định sẵn, còn lại sẽ tiến hành chia phần lớn mang lại lề trái cùng đề nghị.

Xem thêm: Hướng Dẫn Sử Dụng Lò Vi Sóng Sanyo Em-G3597Vs, Hướng Dẫn Sử Dụng Lò Vi Sóng Sanyo Em

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

lấy một ví dụ này đặt lề trái của phần từ class=”ex1”> kế thừa từ bỏ thành phần bà bầu là

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

thường thì lề bên trên cùng lề dưới của những bộ phận ông xã vào nhau thành một lề nhất bằng kích 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 với bên dưới chứ không xẩy ra cùng với lề trái và cần.

h1 margin: 0 0 50px 0;h2 margin: 20px 0 0 0;Tại ví dụ trên, lề dưới của là 50px với lề trên của là 20px. Thông thường phần lề thân cùng đã là tổng của cả hai (có nghĩa là 70px = 50px + 20px) nhưng mà vị vấn đề gộp lề nhưng 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