Thuộc tính margin-block trong CSS
Bùi Tấn Lực - 913
- 08/10/2025
Chức năng của Thuộc tính margin-block trong CSS
Thuộc tính margin-block trong CSS dùng để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha.
Cú pháp của Thuộc tính margin-block trong CSS
margin-block: giatri;
giatri: Giá trị để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
Ví dụ: margin-block:5px;
margin-block: giatri1 giatri2;
giatri1: Giá trị để canh khoảng cách giữa cạnh trên của phần tử HTML so với các phần tử HTML xung quanh cạnh trên hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
giatri2: Giá trị để canh khoảng cách giữa cạnh dưới của phần tử HTML so với các phần tử HTML xung quanh cạnh dưới hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
Ví dụ: margin-block:5px 20px;
Code Thuộc tính margin-block trong CSS
margin-block:5px; (Cách cạnh trên cạnh dưới 5px)
margin-block:5px 20px; (Cách cạnh trên 5px, cách cạnh dưới 20px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-block trong CSS</title>
<style>
*{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div.divcha {width:100%; float:left; height:auto; margin-top:10px; border:1px solid red}
div.divdon{border:1px solid blue; width:100%; float:left; height:auto;}
p {background:green;margin:0px;padding:0px;color:#fff}
div.divdon p{background:red}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-block trong CSS</h1>
<span>Dùng để canh khoảng cách giữa cạnh dưới và cạnh trên của phần tử HTML so với các phần tử HTML xung quanh 2 cạnh hoặc so với phần tử cha:</span>
<div class="divcha"><p style="margin-block:5px" >margin-block:5px (Cách cạnh trên cạnh dưới 5px)</p></div>
<div class="divcha"><p style="margin-block:5px 20px" >margin-block:5px 20px (Cách cạnh trên 5px, cách cạnh dưới 20px)</p></div>
<div class="divcha"><p style="margin-block:0px 20px" >margin-block:0px 20px(Cách cạnh trên 0px, cách cạnh dưới 20px)</p></div>
<div class="divdon" style="margin-block:0px 20px"><p >margin-block:0px 20px(Cách cạnh trên 0px, cách cạnh dưới 20px)</p></div>
<div class="divdon" style="margin-block:0px"><p >margin-block:0px(Cách cạnh trên 0px, cách cạnh dưới 0px, trước đó div trên có cách dưới 20px)</p></div>
</body>
</html>
Margin-block trong CSS và cách xử lý khoảng cách theo hướng viết
margin-block là thuộc tính CSS dạng logical, dùng để thiết lập khoảng cách ở hai cạnh theo hướng block của phần tử. Điểm đáng chú ý là hai cạnh này không cố định là trên và dưới như cách sử dụng margin-top và margin-bottom.
Cách xác định cạnh block phụ thuộc vào writing-mode của phần tử. Vì vậy, margin-block đặc biệt hữu ích khi xây dựng giao diện có nhiều hướng viết hoặc muốn CSS thích ứng tốt hơn với cách bố trí nội dung.
Margin-block có thay đổi theo writing-mode và hướng văn bản không?
Có. margin-block hoạt động dựa trên trục block thay vì gắn cố định với cạnh trên và cạnh dưới của màn hình. Khi writing-mode thay đổi, vị trí của hai cạnh block cũng có thể thay đổi theo.
Với cách viết thông thường từ trái sang phải và từ trên xuống dưới, trục block thường tương ứng với chiều dọc. Khi đó, margin-block tạo khoảng cách ở phía trên và phía dưới phần tử. Trong những writing mode khác, khoảng cách này có thể được áp dụng theo hướng khác.
Đây là ưu điểm quan trọng của thuộc tính logical: thay vì phải viết lại CSS cho từng hướng bố cục, bạn có thể mô tả khoảng cách theo vai trò của cạnh. Điều này giúp mã CSS nhất quán hơn khi giao diện cần hỗ trợ nhiều cách trình bày nội dung.
Khi nào nên dùng margin-block thay cho margin-top và margin-bottom?
Nên ưu tiên margin-block khi khoảng cách bạn muốn thiết lập mang ý nghĩa theo trục block, chẳng hạn khoảng cách giữa các phần nội dung xếp nối tiếp nhau. Cách viết này phù hợp với các giao diện hiện đại vì không phụ thuộc cứng vào việc trục block hiện tại có phải là chiều dọc hay không.
Ngược lại, margin-top hoặc margin-bottom vẫn phù hợp khi bạn thực sự cần tác động đến một cạnh vật lý cụ thể của phần tử và không có nhu cầu thay đổi theo writing mode.
Ví dụ, một nhóm nội dung có thể dùng margin-block để duy trì khoảng cách đầu và cuối nhất quán. Khi cấu trúc bố cục thay đổi theo hướng viết, quy tắc này vẫn giữ được ý nghĩa ban đầu mà không cần chuyển sang các thuộc tính margin vật lý tương ứng.
Những trường hợp margin-block dễ gây nhầm lẫn khi responsive
Một lỗi thường gặp là cho rằng margin-block luôn tương đương với margin-top và margin-bottom trong mọi tình huống. Điều này chỉ đúng khi phần tử đang sử dụng writing mode thông thường.
Khi responsive kết hợp với thay đổi writing-mode, hoặc khi một phần tử kế thừa cách viết khác với dự kiến, vị trí khoảng cách có thể không giống cách bạn hình dung từ tên thuộc tính. Vì vậy, khi kiểm tra giao diện, nên xem cả writing-mode và hướng hiển thị thực tế của phần tử thay vì chỉ nhìn vào giá trị margin-block.
Một nguyên tắc đơn giản là: nếu khoảng cách được xác định theo trục block, hãy dùng margin-block; nếu khoảng cách phải luôn gắn với một cạnh cụ thể như phía trên hoặc phía dưới, các thuộc tính margin vật lý sẽ dễ kiểm soát hơn.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-block 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 *
