Bài 8: Thuộc Tính Margin Và Padding Trong Css, Lề Trong Css

Đặc tính margin trong CSS được dùng để tạo khoảng trắng xung quanh phần tử, bên ngoài các đường viền. Các đặc tính này sẽ đặt lề cho từng cạnh của phần tử (trên, dưới, trái, phải).

Đang xem: Bài 8: thuộc tính margin và padding trong css

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

CSS có các đặc tính xác định lề cho từng cạnh trong phần tử:

margin-topmargin-rightmargin-bottommargin-left

Tất cả các đặc tính lề có thể có các giá trị sau:

auto – trình duyệt tự tính toán 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 định lề kế thừa từ phần tử mẹ

Có thể dùng giá trị âm. Ví dụ dưới đây tạo lề khác nhau cho 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 gọn code, có thể đưa tất cả đặc tính lề vào một đặc tính margin duy nhất, với các đặc tính riêng:

margin-topmargin-rightmargin-bottommargin-left

Nếu đặc tính margin có 4 giá trị

margin: 25px 50px 75px 100px;lề trên 25pxlề phải 50pxlề dưới 75pxlề trái 100pxp { margin: 25px 50px 75px 100px;}Nếu đặc tính margin có 3 giá trị

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

READ:  Apache Là Gì ? Kiến Thức Về Apache, Hướng Dẫn Cài Đặt Apache (Cực Hay)

margin: 25px 50px;lề trên và dưới 25pxlề trái và phải 50pxp { margin: 25px 50px;}Nếu đặc tính margin có 1 giá trị

margin: 25px;tất cả các lề đều là 25pxp { margin: 25px;}Giá trị mặc định

Khi đặt đặc tính margin về giá trị auto, nó sẽ tự động căn giữa phần tử theo chiều ngang. Phần tử chiếm phần độ rộng định sẵn, còn lại sẽ được chia đều cho lề trái và phải.

Xem thêm: Payroll Là Gì ? Những Bất Cập Khi Thiết Lập Payroll Trên Excel Và Giải Pháp

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

Ví dụ này đặt lề trái của phần từ class=”ex1”> kế thừa từ phần tử mẹ là

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

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

Xem thêm: Tôi Nên Cài Đặt Gói X86 Là Gì ? Chi Tiết Về X86 Mới Nhất 2021

h1 { margin: 0 0 50px 0;}h2 { margin: 20px 0 0 0;}Ở ví dụ trên, lề dưới của là 50px và lề trên của là 20px. Thông thường phần lề giữa và sẽ là tổng của cả 2 (tức là 70px = 50px + 20px) nhưng do việc gộp lề mà phần lề này chỉ là 50px.

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

READ:  Địa Hình Cácxtơ - Thế Nào Là Địa Hình Cacxto

Bài sau: Padding trong CSS

5 ★ 1

Xem thêm bài viết thuộc chuyên mục: tin tổng hợp

Bài viết hay nhất