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