Điều chỉnh lề (margin) của một phần tử
Margin (lề) của phần tử kiểm soát khoảng trống giữa border (đường viền) của phần tử và các phần tử xung quanh.
Để tìm hiểu về margin, chúng ta sẽ thực hiện ví dụ xung quanh các thẻ HTML sau:
<h5 class="injected-text">margin</h5>
<div class="box yellow-box">
<h5 class="box red-box">padding</h5>
<h5 class="box blue-box">padding</h5>
</div>
Và CSS ban đầu:
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: 20px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 10px;
}
Ở đây, chúng ta có thể thấy rằng hộp màu xanh và hộp màu đỏ được lồng trong hộp màu vàng. Lưu ý rằng hộp màu đỏ có margin lớn hơn hộp màu xanh lam, làm cho hộp này nhỏ hơn.
Khi bạn tăng margin của hộp màu xanh, nó sẽ tăng khoảng cách giữa border và các phần tử xung quanh nó.
Bài tập 1
Thay đổi margin của hộp màu xanh để khớp với hộp màu đỏ.
Thêm giá trị Margin âm vào một phần tử
Margin của phần tử kiểm soát khoảng trống giữa border của phần tử và các phần tử xung quanh. Nếu bạn đặt margin của phần tử thành giá trị âm, phần tử sẽ trở nên lớn hơn.
Bài tập 2
Cố gắng đặt margin thành giá trị âm như giá trị hộp màu đỏ.
Thay đổi margin của hộp màu xanh thành -15px, vì vậy nó lấp đầy toàn bộ chiều rộng của phần màu vàng xung quanh nó.
CSS:
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}
.blue-box {
background-color: blue;
color: #fff;
padding: 20px;
margin: 20px;
}
Thêm khoảng cách lề khác nhau cho mỗi bên của một phần tử
Đôi khi bạn sẽ muốn tùy chỉnh một phần tử sao cho nó các lề của nó có khoảng cách khác nhau trên mỗi cạnh.
CSS cho phép bạn kiểm soát margin của tất cả bốn mặt riêng lẻ của một phần tử với các thuộc tính:
Bài tập 3
Thiết lập cho hộp màu xanh một lề ở phía trên và bên trái của nó là 40px, nhưng chỉ 20px ở phía dưới và bên phải của nó.
CSS:
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}
.blue-box {
background-color: blue;
color: #fff;
}
Sử dụng viết tắt để chỉ định Margin
Hãy thử viết tắt lại lần nữa, nhưng bây giờ là với thuộc tính margin.
Thay vì chỉ định các thuộc tính margin-top, margin-right, margin-bottom và margin-left riêng lẻ của phần tử, bạn có thể chỉ định chúng tất cả trong một dòng, như sau:
-
margin: 10px 20px 10px 20px;
-
Hoặc tương đương với
margin: 10px 20px;
Bốn giá trị này hoạt động như chiều của kim đồng hồ:
-
top (trên cùng)
-
right (bên phải)
-
bottom (dưới cùng)
-
left (bên trái)
Thiết lập các giá trị theo thứ tự trên một dòng và sẽ tạo ra kết quả chính xác giống như bài hướng dẫn về padding.
Bài tập 4
Sử dụng cách viết này để cung cấp cho phần tử có class blue-box một margin 40px ở phía trên và bên trái của nó, nhưng chỉ 20px ở phía dưới và bên phải của nó:
CSS:
.injected-text {
margin-bottom: -25px;
text-align: center;
}
.box {
border-style: solid;
border-color: black;
border-width: 5px;
text-align: center;
}
.yellow-box {
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: crimson;
color: #fff;
margin: 20px 40px 20px 40px;
}
.blue-box {
background-color: blue;
color: #fff;
}
Bạn đã hiểu cách thiết lập Margin trong CSS chưa?
Trên đây là cách bạn có thể thiết lập Margin trong CSS. Hãy làm từng bài tập và chạy trên trình duyệt để chắc chắn là bạn đã hiểu và biết tự tay thiết lập các thuộc tính nhé.