Thuộc tính inset-inline-start trong CSS
Bùi Tấn Lực - 806
- 12/10/2025
Chức năng của Thuộc tính inset-inline-start trong CSS
Thuộc tính inset-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ạnh trái của phần tử cha của nó, thuộc tính inset-inline-start 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.
Cú pháp của Thuộc tính inset-inline-start trong CSS
inset-inline-start: giatri;
giatri: Giá trị dùng để canh khoảng cách cạnh trái của phần tử HTML so với cạnh trái của phần tử cha (Ví dụ: 5px, 15%, auto, ....)
Code Thuộc tính inset-inline-start trong CSS
inset-inline-start: 5px; (cách cạnh trái của phần tử cha 5px)
inset-inline-start: 20px; (cách cạnh trái của phần tử cha 20px)
inset-inline-start: 15%; (cách cạnh trái của phần tử cha 15%)
inset-inline-start: auto; (cách cạnh trái của phần tử cha auto)
inset-inline-start: 0; (cách cạnh trái của phần tử cha 0px)
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính inset-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: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-start trong CSS</h1>
<p>Dùng để canh khoảng cách cạnh trái của phần tử HTML so với cạnh trái của phần tử cha của nó, thuộc tính inset-inline-start 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:</p>
<div>
<span style="inset-inline-start: 5px">inset-inline-start: 5px; (cách cạnh trái của phần tử cha 5px)</span>
</div>
<div>
<span style="inset-inline-start: 20px">inset-inline-start: 20px; (cách cạnh trái của phần tử cha 20px)</span>
</div>
<div>
<span style="inset-inline-start: 15%">inset-inline-start: 15%; (cách cạnh trái của phần tử cha 15%)</span>
</div>
<div>
<span style="inset-inline-start: auto">inset-inline-start: auto; (cách cạnh trái của phần tử cha auto)</span>
</div>
<div>
<span style="inset-inline-start: 0">inset-inline-start: 0; (cách cạnh trái của phần tử cha 0px)</span>
</div>
</body>
</html>
inset-inline-start khác gì với left trong CSS?
inset-inline-start và left đều có thể dùng để xác định vị trí của một phần tử, nhưng cách chúng xác định hướng hoàn toàn khác nhau. left luôn gắn với cạnh trái của phần tử chứa, trong khi inset-inline-start dựa trên hướng bắt đầu của trục nội tuyến.
Điểm khác biệt này đặc biệt hữu ích khi xây dựng giao diện có thể thay đổi giữa các hướng viết khác nhau. Thay vì cố định phần tử ở bên trái, bạn có thể để CSS tự xác định vị trí bắt đầu phù hợp với writing-mode và direction.
Sự khác nhau giữa inset-inline-start và left
left thuộc nhóm thuộc tính định vị vật lý, nghĩa là nó luôn tham chiếu đến phía bên trái. Ngược lại, inset-inline-start thuộc nhóm thuộc tính logic, tham chiếu đến điểm bắt đầu của trục nội tuyến.
Ví dụ, với giao diện viết từ trái sang phải, inline-start thường nằm ở phía trái. Khi hướng văn bản thay đổi, vị trí này có thể thay đổi theo, giúp bố cục thích ứng mà không phải viết lại nhiều quy tắc CSS.
.box {
position: absolute;
inset-inline-start: 20px;
}
Cách viết trên phù hợp hơn khi vị trí của phần tử cần đi theo hướng của nội dung. Nếu dùng left: 20px, phần tử vẫn bị cố định theo cạnh trái bất kể hướng viết được thiết lập như thế nào.
Khi nào nên dùng inset-inline-start thay cho left?
Nên ưu tiên inset-inline-start khi xây dựng giao diện có khả năng hỗ trợ nhiều hướng viết hoặc muốn CSS thể hiện rõ ý nghĩa về mặt bố cục. Thuộc tính này đặc biệt phù hợp với các thành phần như biểu tượng, nút điều khiển, thanh bên hoặc phần tử được đặt ở đầu dòng nội dung.
Nếu website chỉ sử dụng một hướng bố cục cố định và vị trí luôn được hiểu đơn giản là bên trái, left vẫn là lựa chọn trực tiếp và dễ đọc. Tuy nhiên, với giao diện cần khả năng thích ứng, thuộc tính logic giúp giảm sự phụ thuộc vào vị trí vật lý.
Ví dụ thực tế khi hỗ trợ giao diện đa hướng
Giả sử một nút được đặt cách vị trí bắt đầu của vùng chứa 16px. Khi sử dụng inset-inline-start, bạn có thể giữ nguyên quy tắc định vị và để trình duyệt xử lý hướng hiển thị dựa trên cấu hình của tài liệu.
.action {
position: absolute;
inset-inline-start: 16px;
top: 10px;
}
Đây là cách tiếp cận hữu ích khi cùng một giao diện cần thích nghi với nội dung có hướng viết khác nhau. Thay vì tạo thêm các quy tắc riêng cho từng phía, bạn mô tả vị trí theo vai trò logic của nó trong dòng nội dung.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính inset-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 *
