Khoảng cách lề (margin) là một thuộc tính quan trọng trong CSS giúp tạo khoảng trống xung quanh phần tử HTML, giúp bố cục trang web trở nên gọn gàng và dễ nhìn hơn. Việc thiết lập khoảng cách lề hợp lý không chỉ giúp cải thiện tính thẩm mỹ mà còn tối ưu trải nghiệm người dùng. Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng thuộc tính margin để điều chỉnh khoảng cách giữa các phần tử một cách hiệu quả và linh hoạt.
Lề là gì?
Trong Bài 06 thì tôi đã có giới thiệu sơ qua cho các bạn biết lề là gì rồi. Lề (margin) là khoảng cách nằm giữa đường viền của phần tử đến một phần tử khác.
Thiết lập khoảng cách lề cho một phần tử
– Để thiết lập khoảng cách lề cho một phần tử thì chúng ta cần phải thiết lập thuộc tính margin cho phần tử đó với cú pháp như sau:
margin: value;– Trong đó, value là khoảng cách từ đường viền của phần tử này đến một phần tử khác, nó được xác định dựa theo một trong bốn loại giá trị:
| length | – Chỉ định khoảng cách lề dựa theo một giá trị cụ thể, giá trị này có thể được xác định dựa theo các loại đơn vị như: px, em, cm, . . . . | Xem ví dụ |
| % | – Chỉ định khoảng cách lề dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần tử cha của nó.
– Ví dụ: Chúng ta có phần tử A là cha của phần tử B, chiều rộng phần nội dung của phần tử A là 200px.
|
Xem ví dụ |
| auto | – Thông thường, khi chúng ta gán giá trị này cho thuộc tính margin thì phần tử sẽ được canh nằm ở giữa phần nội dung của cha nó theo chiều ngang. | Xem ví dụ |
| inherit | – Kế thừa giá trị thuộc tính margin từ phần tử cha của nó. | Xem ví dụ |
Thiết lập khoảng cách lề ở riêng từng phía
Sau khi tìm hiểu xong phần hướng dẫn ở trên thì chắc các bạn cũng đã thấy: “khi chúng ta thiết lập thuộc tính margin cho một phần tử HTML thì mặc định khoảng cách lề nằm ở cả bốn phía của phần tử sẽ bằng nhau”
– Tuy nhiên, không phải lúc nào chúng ta cũng muốn như thế, mà đôi khi ta lại muốn mỗi phía của phần tử sẽ có một khoảng cách lề khác nhau, điển hình như phần tử có đường viền màu xanh bên phải, nó có:
– Và để làm được điều đó thì chúng ta có hai cách cơ bản như sau:
|
– Tuy nhiên, trước khi đi vào tìm hiểu chi tiết hai cách trên thì các bạn cần phải nắm rõ tên từng vị trí của lề (bên dưới là ảnh minh họa từng vị trí của lề & tên của chúng)
- top
- bottom
- left
- right
Thiết lập nhiều giá trị cho thuộc tính margin
Cú pháp 1:
margin: value1 value2 value3 value4;– Lề phía trên (top) sẽ có khoảng cách là value1.
– Lề bên phải (right) sẽ có khoảng cách là value2.
– Lề phía dưới (bottom) sẽ có khoảng cách là value3.
– Lề bên trái (left) sẽ có khoảng cách là value4.
Cú pháp 2:
margin: value1 value2 value3;– Lề phía trên (top) sẽ có khoảng cách là value1.
– Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
– Lề phía dưới (bottom) sẽ có khoảng cách là value3.
Cú pháp 3:
margin: value1 value2;– Lề phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.
– Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
Thêm “tên vị trí” vào phía sau thuộc tính margin
– Để thiết lập khoảng cách lề ở riêng từng phía cho phần tử bằng cách thêm tên vị trí vào phía sau thuộc tính margin thì chúng ta sử dụng cú pháp như sau:
margin-tênvịtrí: value;Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
div{
border:5px solid green;
margin-top:25px;
margin-right:300px;
margin-bottom:100px;
margin-left:50px;
}
</style>
</head>
<body>
<div>LẬP TRÌNH WEB</div>
<hr>
<p>- Lề phía trên là 25 pixel</p>
<p>- Lề bên phải là 300 pixel</p>
<p>- Lề phía dưới là 100 pixel</p>
<p>- Lề bên trái là 50 pixel</p>
</body>
</html>
