Thuộc tính margin-bottom trong CSS
Bùi Tấn Lực - 910
- 07/10/2025
Chức năng của Thuộc tính margin-bottom trong CSS
Thuộc tính margin-bottom trong CSS dùng để canh khoảng cách cạnh dưới của phần tử HTML so với các phần tử HTML ở dưới nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-bottom trong CSS
margin-bottom: giatri;
giatri: Giá trị để canh khoảng cách cạnh dưới của phần tử HTML so với các phần tử HTML ở dưới nó hoặc so với phần tử HTML chứa nó (Ví dụ: 20px, 0px, 5%,....)
Code Thuộc tính margin-bottom trong CSS
margin-bottom: 20px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 20px)
margin-bottom: 0px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 0px)
margin-bottom: 5%; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 5%)
margin-bottom: -5px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-bottom trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div {width:100%; float:left; height:auto; margin-bottom:10px; border:1px solid red}
p {background:green;margin:0px;padding:0px;color:#fff}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-bottom trong CSS</h1>
<span>Canh khoảng cách cạnh dưới của phần tử HTML so với các phần tử HTML ở dưới nó hoặc so với phần tử HTML chứa nó:</span>
<div><p style="margin-bottom: 20px" >margin-bottom: 20px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 20px)</p></div>
<div><p style="margin-bottom: 5%" >margin-bottom: 5%; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 5%)</p></div>
<div><p style="margin-bottom: 0px" >margin-bottom: 0px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 0px)</p></div>
<div><p style="margin-bottom: 0" >margin-bottom: 0; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 0px)</p></div>
<div><p style="margin-bottom: auto" >margin-bottom: auto; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 0px)</p></div>
<div><p style="margin-bottom: revert" >margin-bottom: revert;</p></div>
<div style="margin-bottom: 20px" >margin-bottom: 20px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 20px)</div>
<div><p style="margin-bottom: -5px" >margin-bottom: -5px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha -5px)</p></div>
</body>
</html>
Cách sử dụng margin-bottom trong CSS hiệu quả
Hiểu đúng cách dùng margin-bottom giúp kiểm soát khoảng cách theo chiều dọc giữa các thành phần mà không cần chèn khoảng trắng thủ công. Khi áp dụng hợp lý, bố cục sẽ rõ ràng hơn và dễ điều chỉnh khi giao diện thay đổi.
Tạo khoảng cách giữa các phần tử HTML bằng margin-bottom
margin-bottom thường được dùng để tạo khoảng trống bên dưới một phần tử, chẳng hạn như giữa tiêu đề và đoạn văn, giữa các mục trong danh sách hoặc giữa các khối nội dung liên tiếp.
Ví dụ, có thể tạo khoảng cách đồng đều giữa các đoạn văn bằng cách đặt giá trị cho thuộc tính này:
.content p {
margin-bottom: 16px;
}
Cách làm này giúp khoảng cách được kiểm soát trực tiếp bằng CSS. Khi cần thay đổi toàn bộ giao diện, chỉ cần điều chỉnh một giá trị thay vì sửa từng phần tử.
Với các thành phần lặp lại, nên xác định rõ phần tử nào cần khoảng cách để tránh tạo ra khoảng trống dư thừa. Chẳng hạn, nếu tất cả các đoạn văn đều có margin-bottom, đoạn cuối cùng có thể không cần khoảng cách bên dưới.
Kết hợp margin-bottom với các thuộc tính CSS khác
margin-bottom không nên được xem là thuộc tính hoạt động độc lập. Trong bố cục thực tế, nó thường kết hợp với padding, border, width hoặc các cơ chế bố trí như Flexbox và Grid để kiểm soát khoảng cách chính xác hơn.
Ví dụ, padding-bottom tạo khoảng trống bên trong phần tử, còn margin-bottom tạo khoảng cách bên ngoài phần tử. Việc phân biệt hai phạm vi này giúp tránh tình trạng nội dung hoặc nền của phần tử bị đặt sai vị trí.
Khi sử dụng Flexbox hoặc Grid, khoảng cách giữa các phần tử đôi khi có thể được quản lý bằng gap. Trong trường hợp đó, margin-bottom phù hợp hơn khi khoảng cách cần gắn với một phần tử hoặc một nhóm phần tử cụ thể.
Khi nào nên dùng margin-bottom thay cho padding-bottom
Nên dùng margin-bottom khi mục tiêu là tạo khoảng cách bên ngoài một phần tử, tức là muốn đẩy phần tử tiếp theo ra xa hơn. Khoảng trống này không thuộc vùng nội dung của phần tử hiện tại.
Ngược lại, padding-bottom phù hợp khi muốn tăng khoảng trống bên trong phần tử. Phần khoảng trống đó vẫn nằm trong vùng nền và đường viền của phần tử.
Ví dụ, một hộp nội dung cần có khoảng cách giữa chữ và cạnh dưới của hộp thì nên ưu tiên padding-bottom. Nếu muốn tạo khoảng cách giữa hộp đó với một hộp khác bên dưới, margin-bottom sẽ phù hợp hơn.
Việc lựa chọn đúng thuộc tính ngay từ đầu giúp CSS dễ đọc, hạn chế các khoảng cách khó kiểm soát và thuận tiện hơn khi mở rộng giao diện.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-bottom trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
