Thuộc tính inset-inline trong CSS
Bùi Tấn Lực - 938
- 12/10/2025
Chức năng của Thuộc tính inset-inline trong CSS
Thuộc tính inset-inline trong CSS dùng để canh khoảng cách của phần tử HTML so với cạnh trái và cạnh phải của phần tử cha của nó, kích thước của phần tử cũng phụ thuộc vào inset-inline , thuộc tính inset-inline thường dùng cho phần tử HTML có thuộc tính CSS là position với giá trị là fixed hoặc absolute, để sử dụng được thuộc tính inset-inline thì phần tử đó không đặt chiều rộng.
Cú pháp của Thuộc tính inset-inline trong CSS
inset-inline: giatri;
giatri: Phần tử HTML cách cạnh trái và cạnh phải của phần tử cha với giatri trên (Ví dụ: 5px)
Ví dụ: inset-inline: 5px;
inset-inline: giatri1 giatri2;
giatri1: Phần tử HTML cách cạnh trái của phần tử cha với giatri1 (Ví dụ: 5px)
giatri2: Phần tử HTML cách cạnh phải của phần tử cha với giatri2 (Ví dụ: 30px)
Ví dụ: inset-inline: 5px 30px;
Code Thuộc tính inset-inline trong CSS
inset-inline: 5px; (cách cạnh trái và cạnh phải của phần tử cha 5px)
inset-inline: 5px 30px; (cách cạnh trái của phần tử cha 5px, cách cạnh phải của phần tử cha 30px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính inset-inline trong CSS</title>
<style>
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
div{width:100%; float:left; height:70px; border:1px solid red; margin-bottom:10px; position: relative;}
span{background:green;position: absolute; color:#fff}
</style>
</head>
<body>
<h1>Code Thuộc tính inset-inline trong CSS</h1>
<p>Dùng để canh khoảng cách của phần tử HTML so với cạnh trái và cạnh phải của phần tử cha của nó, kích thước của phần tử cũng phụ thuộc vào inset-inline , thuộc tính inset-inline thường dùng cho phần tử HTML có thuộc tính CSS là position với giá trị là fixed hoặc absolute, để sử dụng được thuộc tính inset-inline thì phần tử đó không đặt chiều rộng:</p>
<div>
<span style="inset-inline: 5px">inset-inline: 5px; (cách cạnh trái và cạnh phải của phần tử cha 5px)</span>
</div>
<div>
<span style="inset-inline: 5px 30px">inset-inline: 5px 30px; (cách cạnh trái của phần tử cha 5px, cách cạnh phải của phần tử cha 30px)</span>
</div>
</body>
</html>
Cách sử dụng inset-inline trong các tình huống thực tế
inset-inline phát huy tác dụng rõ nhất khi cần đặt một phần tử theo trục inline mà không muốn phụ thuộc trực tiếp vào left hoặc right. Cách viết này đặc biệt hữu ích với giao diện có nhiều kích thước màn hình hoặc cần hỗ trợ cả hướng viết từ trái sang phải và từ phải sang trái.
Định vị phần tử theo chiều inline với inset-inline
Khi kết hợp inset-inline với position: absolute hoặc position: fixed, bạn có thể xác định khoảng cách của phần tử đến hai cạnh theo trục inline bằng một khai báo ngắn gọn.
Ví dụ, thay vì thiết lập riêng left và right, có thể dùng inset-inline để giữ phần tử cách hai phía một khoảng cố định:
.box {
position: absolute;
inset-inline: 20px;
}
Cách này phù hợp với các thành phần cần căn theo cả hai phía, chẳng hạn hộp thông báo, thanh điều khiển hoặc một vùng nội dung nằm bên trong phần tử cha có kích thước thay đổi.
Kết hợp inset-inline với position để tạo bố cục linh hoạt
inset-inline không tự tạo ra cơ chế định vị. Để thuộc tính phát huy tác dụng trong bố cục định vị, phần tử thường cần sử dụng một giá trị position phù hợp. Nhờ đó, khoảng cách theo trục inline có thể được kiểm soát mà không phải viết nhiều thuộc tính riêng lẻ.
Chẳng hạn, một nút nằm ở cuối vùng chứa có thể được đặt theo hướng inline mà không cần xác định trực tiếp cạnh trái hay phải:
.action {
position: absolute;
inset-inline-end: 16px;
}
Ưu điểm nằm ở việc quy tắc CSS tập trung vào vai trò của cạnh thay vì phụ thuộc vào vị trí vật lý. Khi hướng hiển thị thay đổi, cách định vị có thể thích ứng tốt hơn với cấu trúc giao diện.
Sử dụng inset-inline khi thiết kế giao diện hỗ trợ RTL
Đây là một trong những trường hợp inset-inline thể hiện rõ giá trị của CSS Logical Properties. Với giao diện hỗ trợ ngôn ngữ có hướng viết từ phải sang trái, việc gắn cứng vị trí bằng left và right có thể khiến CSS phải bổ sung nhiều quy tắc điều chỉnh.
Với inset-inline-start và inset-inline-end, bạn mô tả vị trí dựa trên đầu và cuối của trục inline. Trình duyệt sẽ xác định cạnh tương ứng theo hướng viết của nội dung.
Ví dụ:
.icon {
position: absolute;
inset-inline-end: 12px;
}
Trong giao diện thông thường, phần tử sẽ được đặt về phía cuối theo chiều inline; khi hướng văn bản thay đổi, vị trí này cũng được ánh xạ theo quy tắc của hướng viết. Điều đó giúp một hệ thống giao diện dễ mở rộng sang RTL hơn mà không cần viết lại toàn bộ logic định vị.
Thay thế left và right bằng inset-inline khi nào?
Nên ưu tiên inset-inline khi vị trí của phần tử được xác định theo trục inline và bạn muốn CSS hoạt động tốt với nhiều hướng viết. Đây là lựa chọn đáng cân nhắc cho các component dùng lại nhiều nơi, thiết kế đa ngôn ngữ hoặc hệ thống giao diện dựa trên CSS Logical Properties.
Ngược lại, nếu yêu cầu bố cục gắn chặt với một cạnh vật lý cụ thể của màn hình hoặc thiết kế không cần thích ứng theo hướng viết, left và right vẫn có thể phù hợp.
Điểm quan trọng là không nên thay thế máy móc mọi trường hợp. Hãy chọn inset-inline khi ý định của bố cục là “cách đầu/cuối theo chiều inline”, thay vì đơn thuần là “cách bên trái/bên phải”. Cách tư duy này giúp CSS rõ nghĩa hơn và dễ bảo trì khi giao diện phát triển.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính inset-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 *
