Thuộc tính margin-block-end trong CSS
Bùi Tấn Lực - 868
- 08/10/2025
Chức năng của Thuộc tính margin-block-end trong CSS
Thuộc tính margin-block-end 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-block-end trong CSS
margin-block-end: 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-block-end trong CSS
margin-block-end: 20px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 20px)
margin-block-end: 0px; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 0px)
margin-block-end: 5%; (Cạnh dưới cách các phần tử phía dưới hoặc phần tử cha 5%)
margin-block-end: -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-block-end 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-block-end:10px; border:1px solid red}
p {background:green;margin:0px;padding:0px;color:#fff}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-block-end trong CSS</h1>
<h4>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ó:</h4>
<div><p style="margin-block-end: 20px" >margin-block-end: 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-block-end: 5%" >margin-block-end: 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-block-end: 0px" >margin-block-end: 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-block-end: 0" >margin-block-end: 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-block-end: auto" >margin-block-end: 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-block-end: revert" >margin-block-end: revert;</p></div>
<div style="margin-block-end: 20px" >margin-block-end: 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-block-end: -5px" >margin-block-end: -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 kết hợp margin-block-end với các thuộc tính CSS khác
Khi xây dựng bố cục theo CSS Logical Properties, margin-block-end thường không hoạt động riêng lẻ. Việc kết hợp với các thuộc tính tạo khoảng cách khác giúp kiểm soát bố cục rõ ràng hơn, đặc biệt khi thiết kế có nhiều thành phần xếp theo hướng block.
Kết hợp margin-block-end với margin-block-start
margin-block-start và margin-block-end lần lượt kiểm soát khoảng trống ở hai phía đầu và cuối theo hướng block của phần tử. Khi sử dụng cùng nhau, bạn có thể chủ động tạo khoảng cách trước và sau một thành phần mà không cần phụ thuộc vào hướng viết ngang hay dọc.
Ví dụ, có thể dùng margin-block-end để tạo khoảng cách sau tiêu đề, đồng thời dùng margin-block-start cho phần nội dung tiếp theo:
.title {
margin-block-end: 16px;
}
.content {
margin-block-start: 8px;
}
Cách tổ chức này hữu ích khi từng thành phần cần có khoảng cách riêng. Tuy nhiên, nếu hai phần tử liên tiếp đều thiết lập margin ở cùng vùng tiếp giáp, cần kiểm tra cách trình duyệt xử lý margin để tránh khoảng cách thực tế không giống với phép cộng đơn giản của hai giá trị.
Kết hợp margin-block-end với padding và border
margin-block-end tạo khoảng cách bên ngoài phần tử, trong khi padding tạo khoảng trống bên trong và border xác định đường viền bao quanh phần tử. Phân biệt rõ ba lớp này giúp bố cục dễ kiểm soát hơn.
Chẳng hạn, một khối nội dung có thể dùng padding để tạo khoảng thở giữa chữ và viền, border để tạo ranh giới trực quan, còn margin-block-end để tách khối đó khỏi phần tử kế tiếp.
.card {
padding: 20px;
border: 1px solid #ddd;
margin-block-end: 24px;
}
Nhờ cách phân chia này, việc thay đổi khoảng cách giữa các khối không làm ảnh hưởng đến khoảng trống bên trong từng khối. Đây cũng là cách sử dụng phù hợp khi xây dựng giao diện có nhiều thành phần lặp lại.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-block-end 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 *
