Trong hướng dẫn này, bạn sẽ học cách điều chỉnh không gian xung quanh một phần tử bằng CSS.
Thuộc tính Margin CSS
Các thuộc tính lề CSS cho phép bạn đặt khoảng cách xung quanh đường viền của hộp phần tử (hoặc cạnh của hộp phần tử, nếu nó không có đường viền được xác định).
Lề của một phần tử không bị ảnh hưởng bởi phần tử của nó background-color, nó luôn trong suốt. Tuy nhiên, nếu phần tử gốc có màu nền, nó sẽ hiển thị qua vùng lề của nó.
Đặt lề cho các mặt riêng lẻ
Bạn có thể chỉ định lề cho các mặt riêng lẻ của một phần tử, chẳng hạn như các mặt trên, phải, dưới và trái bằng cách sử dụng CSS margin-top, margin-right, margin-bottom và margin-left. Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:
Ví dụ
h1 {
margin-top: 50px;
margin-bottom: 100px;
}
p {
margin-left: 75px;
margin-right: 75px;
}Các thuộc tính lề có thể được chỉ định bằng các giá trị sau:
length- chỉ định lề tính bằng px, em, rem, pt, cm, v.v.%- chỉ định lề theo tỷ lệ phần trăm (%) chiều rộng của phần tử chứa.auto- trình duyệt tính toán mức Margin phù hợp để sử dụng.inherit- chỉ định rằng lề phải được kế thừa từ phần tử cha.
Bạn cũng có thể chỉ định lề âm trên một phần tử, ví dụ: margin: -10px;, margin: -5%; v.v.
Thuộc tính rút gọn Margin
Thuộc tính margin là thuộc tính rút gọn để tránh đặt lề của mỗi bên một cách riêng biệt, ví dụ: margin-top, margin-right, margin-bottom và margin-left.
Hãy cùng xem ví dụ sau để hiểu cơ bản nó hoạt động như thế nào:
Ví dụ
h1 {
margin: 50px; /* apply to all four sides */
}
p {
margin: 25px 75px; /* vertical | horizontal */
}
div {
margin: 25px 50px 75px; /* top | horizontal | bottom */
}
hr {
margin: 25px 50px 75px 100px; /* top | right | bottom | left */
}Ký hiệu rút gọn này có thể nhận một, hai, ba hoặc bốn giá trị được phân tách bằng khoảng trắng.
- Nếu một giá trị được chỉ định, nó sẽ được áp dụng cho cả bốn phía .
- Nếu hai giá trị được chỉ định, thì giá trị đầu tiên được áp dụng cho mặt trên và mặt dưới , còn giá trị thứ hai được áp dụng cho mặt bên phải và bên trái của hộp phần tử.
- Nếu ba giá trị được chỉ định, giá trị đầu tiên được áp dụng cho trên cùng , giá trị thứ hai được áp dụng cho bên phải và bên trái và giá trị cuối cùng được áp dụng cho bên dưới .
- Nếu bốn giá trị được chỉ định, chúng sẽ được áp dụng lần lượt cho trên cùng , bên phải , dưới cùng và bên trái của hộp của phần tử theo thứ tự đã chỉ định.
Bạn nên sử dụng các thuộc tính rút gọn, nó sẽ giúp bạn tiết kiệm thời gian bằng cách tránh phải nhập thêm và giúp mã CSS của bạn dễ theo dõi và bảo trì hơn.
Định tâm theo chiều ngang với Auto Margins
Giá trị auto của thuộc tính margin báo cho trình duyệt web tự động tính toán lề. Điều này thường được sử dụng để căn giữa một phần tử theo chiều ngang trong một vùng chứa lớn hơn.
Hãy thử ví dụ sau để hiểu cách thức hoạt động của nó:
Ví dụ
div {
width: 300px;
background: gray;
margin: 0 auto;
} Các quy tắc kiểu ở trên cho phép <div> chiếm 300 pixel trong tất cả không gian ngang có sẵn và không gian còn lại sẽ được chia đều giữa lề trái và phải.
