Thuộc tính margin-bottom trong CSS dùng để xác định khoảng lề dưới của một phần tử. Lề có thể được thiết lập theo độ dài hoặc phần trăm.
Cú pháp:
margin-bottom: <length> | <percentage> | auto
Giá trị thuộc tính:
- Length: Giá trị này chỉ định độ dài của lề bằng một giá trị cố định. Giá trị này có thể là dương, âm hoặc bằng không.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>CSS margin-bottom</title>
<style>
div{
background-color: lightgreen;
}
</style>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<!-- margin-bottom for below div
is set to 50px -->
<div style="margin-bottom: 50px">Line One</div>
<!-- margin-bottom for below div
is set to 0px -->
<div style="margin-bottom: 0px">Line Two</div>
<div>Line Three</div>
</body>
</html>
Đầu ra:
- Percentage: Giá trị này chỉ định kích thước lề theo tỷ lệ phần trăm so với chiều rộng của phần tử chứa.
Ví dụ:
html<!DOCTYPE html>
<html>
<head>
<title>CSS margin-bottom</title>
<style>
h1 {
color: green;
}
.larger {
width: 300px;
background-color: white;
}
.smaller {
width: 100px;
background-color: white;
}
div{
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<!-- margin-bottom is set to 10% with width of
containing box set to 300px -->
<div class="larger">
<div style="margin-bottom: 10%";>Line One</div>
<div>Line Two</div>
</div>
<!-- margin-bottom is set to 10% with width of
containing box set to 100px -->
<div class="smaller">
<div style="margin-bottom: 10%;">Line One</div>
<div>Line Two</div>
</div>
</body>
</html>
Đầu ra:
- auto: Nếu giá trị của thuộc tính này được đặt là "auto" trình duyệt tự động tính toán kích thước lề phù hợp.
Trình duyệt được hỗ trợ: Các trình duyệt hỗ trợ thuộc tính margin-bottom được liệt kê dưới đây:
- Google Chrome 1
- Edge 12
- Internet Explorer 3
- Firefox 1
- Opera 3.5
- Safari 1