Thuộc tính margin-inline-start trong CSS
Bùi Tấn Lực - 845
- 08/10/2025
Chức năng của Thuộc tính margin-inline-start trong CSS
Thuộc tính margin-inline-start trong CSS dùng để canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó.
Cú pháp của Thuộc tính margin-inline-start trong CSS
margin-inline-start: giatri;
giatri: Giá trị để canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 20px,10%,....)
Code Thuộc tính margin-inline-start trong CSS
margin-inline-start: 20px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 20px)
margin-inline-start: 0px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)
margin-inline-start: 5%; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 5%)
margin-inline-start: -5px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-inline-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; 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-inline-start trong CSS</h1>
<span>Canh khoảng cách cạnh trái của phần tử HTML so với các phần tử HTML ở bên trái nó hoặc so với phần tử HTML chứa nó:</span>
<div><p style="margin-inline-start: 20px" >margin-inline-start: 20px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 20px)</p></div>
<div><p style="margin-inline-start: 5%" >margin-inline-start: 5%; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 5%)</p></div>
<div><p style="margin-inline-start: 0px" >margin-inline-start: 0px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-start: 0" >margin-inline-start: 0; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-start: auto" >margin-inline-start: auto; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-start: revert" >margin-inline-start: revert</p></div>
<div style="margin-inline-start: 20px;width:30%" >margin-inline-start: 20px</div>
<div style="margin-inline-start: 20px;width:30%" >margin-inline-start: 20px</div>
<div><p style="margin-inline-start: -5px" >margin-inline-start: -5px; (Cạnh trái cách các phần tử phía bên trái hoặc phần tử cha -5px)</p></div>
</body>
</html>
Cách sử dụng margin-inline-start hiệu quả trong CSS
margin-inline-start phát huy hiệu quả nhất khi bạn muốn tạo khoảng cách ở phía bắt đầu của trục nội dòng mà không phải cố định vị trí theo trái hoặc phải. Cách tiếp cận này giúp CSS thích ứng tốt hơn với hướng hiển thị của nội dung và các bố cục có khả năng thay đổi.
margin-inline-start thay đổi theo direction và writing-mode
Khác với margin-left luôn gắn với cạnh trái của phần tử, margin-inline-start xác định khoảng cách dựa trên phía bắt đầu của hướng nội dòng. Vì vậy, vị trí thực tế của khoảng cách có thể thay đổi khi giá trị direction hoặc writing-mode thay đổi.
Trong bố cục thông thường với direction: ltr, phía bắt đầu thường nằm bên trái nên margin-inline-start tạo khoảng cách tương ứng ở bên trái. Khi chuyển sang direction: rtl, phía bắt đầu chuyển sang bên phải và khoảng cách cũng được điều chỉnh theo.
.box {
margin-inline-start: 24px;
}
.rtl {
direction: rtl;
}
Cách viết này đặc biệt hữu ích khi xây dựng giao diện có nhiều ngôn ngữ. Bạn chỉ cần thay đổi hướng nội dung thay vì phải tạo thêm các quy tắc riêng cho từng phía.
Khi nào nên dùng margin-inline-start thay cho margin-left
Nên ưu tiên margin-inline-start khi khoảng cách bạn muốn tạo mang ý nghĩa “cách phần bắt đầu của nội dung một khoảng”, thay vì cố định là “cách bên trái”. Đây là lựa chọn phù hợp cho menu, danh sách, nhóm nút, bố cục văn bản và các thành phần có thể xuất hiện trong nhiều hướng đọc.
Ngược lại, margin-left vẫn hợp lý khi thiết kế thực sự phụ thuộc vào vị trí bên trái của giao diện. Ví dụ, một thành phần được đặt cố định cách mép trái của một khung thì việc sử dụng margin-left có thể trực quan và dễ kiểm soát hơn.
Với các giao diện cần hỗ trợ cả LTR và RTL, sử dụng thuộc tính logical như margin-inline-start thường giúp giảm số lượng CSS phải viết và hạn chế việc tạo các quy tắc ghi đè chỉ để đổi trái thành phải.
Kết hợp margin-inline-start với các thuộc tính CSS logical khác
margin-inline-start sẽ phát huy tốt hơn khi được sử dụng cùng các thuộc tính logical khác. Thay vì xây dựng bố cục dựa hoàn toàn vào top, right, bottom và left, bạn có thể mô tả khoảng cách theo trục inline và block.
Chẳng hạn, margin-inline-start có thể kết hợp với margin-inline-end để kiểm soát hai đầu của trục nội dòng, trong khi các thuộc tính như margin-block-start và margin-block-end đảm nhiệm khoảng cách theo trục khối.
.card {
margin-inline-start: 20px;
margin-inline-end: 12px;
margin-block-start: 16px;
margin-block-end: 16px;
}
Cách tổ chức này giúp mã CSS thể hiện rõ vai trò của từng khoảng cách thay vì phụ thuộc vào hướng trái phải cố định. Khi cấu trúc giao diện thay đổi hoặc cần hỗ trợ nhiều hướng viết, việc duy trì CSS cũng trở nên thuận tiện 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-inline-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 *
