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