Thuộc tính margin-inline-end trong CSS
Bùi Tấn Lực - 890
- 08/10/2025
Chức năng của Thuộc tính margin-inline-end trong CSS
Thuộc tính margin-inline-end trong CSS dùng để canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phả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-end trong CSS
margin-inline-end: giatri;
giatri: Giá trị để canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phải nó hoặc so với phần tử HTML chứa nó (Ví dụ: 0px, 10px, 5%,....)
Code Thuộc tính margin-inline-end trong CSS
margin-inline-end: 20px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 20px)
margin-inline-end: 0px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)
margin-inline-end: 5%; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 5%)
margin-inline-end: -5px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha -5px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính margin-inline-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-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-end trong CSS</h1>
<span>Canh khoảng cách cạnh phải của phần tử HTML so với các phần tử HTML ở bên phải nó hoặc so với phần tử HTML chứa nó:</span>
<div><p style="margin-inline-end: 20px" >margin-inline-end: 20px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 20px)</p></div>
<div><p style="margin-inline-end: 5%" >margin-inline-end: 5%; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 5%)</p></div>
<div><p style="margin-inline-end: 0px" >margin-inline-end: 0px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-end: 0" >margin-inline-end: 0; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-end: auto" >margin-inline-end: auto; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha 0px)</p></div>
<div><p style="margin-inline-end: revert" >margin-inline-end: revert</p></div>
<div style="margin-inline-end: 20px;width:30%" >margin-inline-end: 20px</div>
<div style="margin-inline-end: 20px;width:30%" >margin-inline-end: 20px</div>
<div><p style="margin-inline-end: -5px" >margin-inline-end: -5px; (Cạnh phải cách các phần tử phía bên phải hoặc phần tử cha -5px)</p></div>
</body>
</html>
Ứng dụng margin-inline-end trong bố cục CSS thực tế
margin-inline-end phát huy hiệu quả khi cần tạo khoảng trống ở phía cuối của hướng inline thay vì cố định khoảng cách cho một cạnh cụ thể. Cách viết này đặc biệt phù hợp với giao diện có thể thay đổi hướng hiển thị, giúp CSS linh hoạt hơn khi bố cục chuyển giữa trái sang phải và phải sang trái.
Tạo khoảng cách giữa các phần tử theo hướng inline
Khi các phần tử được sắp xếp liên tiếp trên cùng một dòng, margin-inline-end có thể tạo khoảng cách ở phía cuối của phần tử mà không cần xác định đó là bên trái hay bên phải. Điều này giúp quy tắc CSS tập trung vào cách bố cục hoạt động thay vì phụ thuộc vào hướng giao diện.
Ví dụ, có thể dùng thuộc tính này cho các liên kết trong một nhóm điều hướng để tạo khoảng cách giữa những mục liền nhau:
.menu-item {
margin-inline-end: 20px;
}
Cách triển khai này thuận tiện khi giao diện có nhiều thành phần dùng chung một quy tắc khoảng cách. Tuy nhiên, với phần tử cuối cùng trong danh sách, nên cân nhắc loại bỏ khoảng trống không cần thiết để tránh làm bố cục bị dư khoảng cách.
Kết hợp margin-inline-end với margin-inline-start
margin-inline-start và margin-inline-end có thể được sử dụng cùng nhau khi một phần tử cần kiểm soát khoảng trống ở cả hai đầu theo hướng inline. Đây là lựa chọn phù hợp với các thành phần như nhóm nút, thanh điều hướng hoặc nội dung cần giữ khoảng cách cân đối.
Chẳng hạn, một phần tử có thể tạo khoảng trống ở đầu và cuối mà không phải chuyển sang các thuộc tính phụ thuộc vào cạnh vật lý:
.box {
margin-inline-start: 12px;
margin-inline-end: 12px;
}
Việc kết hợp hai thuộc tính giúp quy tắc dễ đọc và thuận tiện điều chỉnh khi cấu trúc giao diện thay đổi. Nếu chỉ cần tạo khoảng cách ở một phía cuối của hướng inline thì nên dùng riêng margin-inline-end để CSS gọn hơn.
Sử dụng margin-inline-end trong thiết kế hỗ trợ RTL
Với giao diện hỗ trợ RTL (Right-to-Left), hướng inline có thể thay đổi so với bố cục thông thường. margin-inline-end thích hợp trong trường hợp này vì khoảng cách được xác định theo hướng của nội dung thay vì khóa vào một cạnh vật lý như trái hoặc phải.
Nhờ đó, cùng một quy tắc CSS có thể được tái sử dụng khi giao diện thay đổi hướng đọc. Đây là một lợi ích đáng chú ý khi xây dựng website đa ngôn ngữ, bởi nhà phát triển không phải viết riêng nhiều quy tắc chỉ để đảo vị trí khoảng cách.
Khi sử dụng thuộc tính này, nên kiểm tra trực tiếp cả hai hướng hiển thị để bảo đảm khoảng cách giữa các thành phần vẫn đúng với thiết kế và không tạo ra khoảng trống ngoài ý muố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-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 *
