Thuộc tính margin-block-start trong CSS
Bùi Tấn Lực - 872
- 08/10/2025
Chức năng của Thuộc tính margin-block-start trong CSS
Thuộc tính margin-block-start trong CSS dùng để canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-block-start trong CSS
margin-block-start: giatri;
giatri: Giá trị để canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 10px, 10%,....)
Code Thuộc tính margin-block-start trong CSS
margin-block-start: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)
margin-block-start: 0px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)
margin-block-start: 5%; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 5%)
margin-block-start: -5px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-block-start 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;border:1px solid red}
div.divcha{margin-top:10px;}
p {background:green;margin:0px;padding:0px;color:#fff}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-block-start trong CSS</h1>
<span>Canh khoảng cách cạnh trên của phần tử HTML so với các phần tử HTML ở trên nó hoặc so với phần tử HTML chứa nó:</span>
<div class="divcha"><p style="margin-block-start: 20px" >margin-block-start: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)</p></div>
<div class="divcha"><p style="margin-block-start: 5%" >margin-block-start: 5%; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 5%)</p></div>
<div class="divcha"><p style="margin-block-start: 0px" >margin-block-start: 0px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-block-start: 0" >margin-block-start: 0; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-block-start: auto" >margin-block-start: auto; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 0px)</p></div>
<div class="divcha"><p style="margin-block-start: revert" >margin-block-start: revert</p></div>
<div class="divcha"><p style="margin-block-start: -5px" >margin-block-start: -5px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha -5px)</p></div>
<div style="margin-block-start: 20px" >margin-block-start: 20px; (Cạnh trên cách các phần tử phía trên hoặc phần tử cha 20px)</div>
</body>
</html>
Ứng dụng của margin-block-start trong CSS
margin-block-start phù hợp khi cần tạo khoảng cách ở phía đầu của vùng block mà không muốn cố định theo hướng trên của màn hình. Cách viết này đặc biệt hữu ích khi giao diện có thể thay đổi hướng viết hoặc được xây dựng theo nhiều kiểu bố cục khác nhau.
margin-block-start khác gì margin-top?
margin-top tạo khoảng cách trực tiếp với cạnh trên của phần tử, trong khi margin-block-start xác định khoảng cách ở đầu của chiều block. Vì vậy, hai thuộc tính có thể cho kết quả tương tự trong bố cục viết từ trái sang phải thông thường, nhưng ý nghĩa của chúng khác nhau.
Với margin-block-start, vị trí được xác định dựa trên hướng của dòng và chế độ viết. Điều này giúp CSS linh hoạt hơn khi giao diện cần hỗ trợ các kiểu viết hoặc hướng hiển thị khác nhau.
Ví dụ, thay vì cố định khoảng cách bằng margin-top, có thể sử dụng:
.title {
margin-block-start: 24px;
}
Cách viết này thể hiện rõ rằng khoảng cách nằm ở phía bắt đầu của chiều block, thay vì gắn trực tiếp với cạnh trên của phần tử.
Khi nào nên sử dụng margin-block-start?
Nên sử dụng margin-block-start khi muốn xây dựng CSS theo hướng logical properties, đặc biệt trong các thành phần có thể tái sử dụng ở nhiều bố cục. Thuộc tính này cũng hữu ích khi cần hạn chế việc phụ thuộc vào vị trí vật lý như trên, dưới, trái hoặc phải.
Trong các giao diện thông thường, margin-top vẫn dễ hiểu và phù hợp khi mục tiêu thực sự là tạo khoảng cách phía trên. Ngược lại, nếu khoảng cách cần được xác định theo cấu trúc chiều block, margin-block-start sẽ diễn đạt đúng ý đồ thiết kế hơn.
Việc lựa chọn thuộc tính nên dựa trên cách bố cục được tổ chức thay vì chỉ dựa vào kết quả hiển thị trước mắt. Điều này giúp CSS dễ bảo trì hơn khi giao diện được mở rộng hoặc thay đổi cách viết.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-block-start 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 *
