Thuộc tính margin-inline trong CSS
Bùi Tấn Lực - 864
- 08/10/2025
Chức năng của Thuộc tính margin-inline trong CSS
Thuộc tính margin-inline trong CSS dùng để canh khoảng cách cạnh trái và cạnh phải của phần tử HTML so với các phần tử HTML nằm bên trái và bên phải hoặc so với phần tử cha chứa nó.
Cú pháp của Thuộc tính margin-inline trong CSS
margin-inline: giatri;
giatri: Giá trị để canh khoảng cách giữa cạnh trái và cạnh phải 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-inline:5px;
margin-inline: giatri1 giatri2;
giatri1: Giá trị để canh khoảng cách giữa cạnh trái của phần tử HTML so với các phần tử HTML xung quanh cạnh trái 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 phải của phần tử HTML so với các phần tử HTML xung quanh cạnh phải hoặc so với phần tử cha (Ví dụ: 0px, 5px, 5%,....)
Ví dụ: margin-inline:5px 20px;
Code Thuộc tính margin-inline trong CSS
margin-inline:5px; (Cách cạnh trái, cạnh phải 5px)
margin-inline:5px 20px; (Cách cạnh trái 5px, cách cạnh phải 20px)
margin-inline:0px 20px; (Cách cạnh trái 0px, cách cạnh phải 20px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-inline 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-bottom:10px; border:1px solid red}
div.divdon{border:1px solid blue; width:30%; float:left; height:auto;}
p {background:green;margin:0px;padding:0px;color:#fff}
div.divdon p{background:red}
span {width:100%; float: left; heigt:auto; margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính margin-inline trong CSS</h1>
<span>Canh khoảng cách cạnh trái và cạnh phải của phần tử HTML so với các phần tử HTML nằm bên trái và bên phải hoặc so với phần tử cha chứa nó:</span>
<!--Dành cho thẻ span-->
<div class="divcha"><p style="margin-inline:5px" >margin-inline:5px (Cách cạnh trái, cạnh phải 5px)</p></div>
<div class="divcha"><p style="margin-inline:5px 20px" >margin-inline:5px 20px (Cách cạnh trái 5px, cách cạnh phải 20px)</p></div>
<div class="divcha"><p style="margin-inline:0px 20px" >margin-inline:0px 20px(Cách cạnh trái 0px, cách cạnh phải 20px)</p></div>
<!--Dành cho thẻ div-->
<div class="divdon" style="margin-inline:20px"><p >margin-inline:0px 20px(Cách cạnh trái ngoài 20px, cách cạnh phải ngoài 20px)</p></div>
<div class="divdon" style="margin-inline:0px"><p >margin-inline:0px(Cách cạnh trái ngoài 0px, cách cạnh phải ngoài 0px, trước đó div trái có cách phải ngoài 20px)</p></div>
</body>
</html>
Những lỗi thường gặp khi sử dụng margin-inline trong CSS
Dù margin-inline giúp kiểm soát khoảng cách theo hướng nội tuyến linh hoạt hơn, thuộc tính này vẫn dễ gây nhầm lẫn nếu chỉ áp dụng theo thói quen của margin-left và margin-right. Một vài lỗi nhỏ trong cách khai báo có thể khiến khoảng cách hiển thị không đúng như mong muốn.
Nhầm giữa margin-inline và margin-left, margin-right
margin-inline không gắn cố định với bên trái và bên phải. Vị trí mà nó tác động phụ thuộc vào hướng nội tuyến của phần tử. Vì vậy, nếu giao diện cần thích ứng với các hướng viết khác nhau, việc thay thế máy móc bằng margin-left hoặc margin-right có thể làm mất tính linh hoạt.
Chẳng hạn, khi muốn tạo khoảng cách ở hai đầu theo hướng nội tuyến, có thể viết:
.box {
margin-inline: 20px;
}
Cách viết này phù hợp hơn khi mục tiêu là tạo khoảng cách ở hai phía nội tuyến mà không cần xác định cứng bên trái hay bên phải.
Hiểu sai thứ tự giá trị khi dùng margin-inline
margin-inline có thể nhận một hoặc hai giá trị. Khi chỉ có một giá trị, giá trị đó được áp dụng cho cả hai phía nội tuyến. Khi có hai giá trị, giá trị đầu tiên áp dụng cho một phía và giá trị thứ hai áp dụng cho phía còn lại.
.box {
margin-inline: 10px 30px;
}
Vì vậy, không nên đọc hai giá trị theo cách cố định là trái rồi phải. Cần xét hướng nội tuyến của phần tử để xác định chính xác mỗi giá trị đang tác động đến phía nào.
Quên ảnh hưởng của direction và writing-mode
Đây là nguyên nhân thường khiến kết quả hiển thị khác với dự kiến. direction có thể thay đổi hướng nội tuyến, trong khi writing-mode có thể thay đổi cách các hướng vật lý được ánh xạ sang hướng logic.
Do đó, khi margin-inline hoạt động không giống mong đợi, nên kiểm tra cả các thuộc tính định hướng của phần tử và phần tử cha thay vì chỉ thay đổi giá trị margin. Cách kiểm tra này đặc biệt hữu ích khi xây dựng giao diện hỗ trợ nhiều ngôn ngữ hoặc bố cục không theo hướng viết ngang thông thường.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính margin-inline 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 *
