inset-inline-end
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.
* Some parts of this feature may have varying levels of support.
Thuộc tính CSS inset-inline-end định nghĩa inset cuối inline logic của một phần tử, ánh xạ đến một offset vật lý tùy thuộc vào chế độ viết, hướng và hướng văn bản của phần tử. Nó tương ứng với thuộc tính top, right, bottom, hoặc left tùy thuộc vào các giá trị được định nghĩa cho writing-mode, direction và text-orientation.
Thuộc tính inset này không có tác dụng trên các phần tử không được định vị.
Try it
writing-mode: horizontal-tb;
writing-mode: vertical-rl;
writing-mode: horizontal-tb;
direction: rtl;
writing-mode: vertical-lr;
<section id="default-example">
<div class="example-container" id="example-element">
<div id="abspos">
I am absolutely positioned with inset-inline-end: 50px
</div>
<p>
As much mud in the streets as if the waters had but newly retired from the
face of the earth, and it would not be wonderful to meet a Megalosaurus,
forty feet long or so, waddling like an elephantine lizard up Holborn
Hill.
</p>
</div>
</section>
#example-element {
border: 0.75em solid;
padding: 0.75em;
position: relative;
width: 100%;
min-height: 200px;
unicode-bidi: bidi-override;
}
#abspos {
background-color: yellow;
color: black;
border: 3px solid red;
position: absolute;
inset-inline-end: 50px;
inline-size: 140px;
min-block-size: 80px;
}
Cú pháp
/* Giá trị <length> */
inset-inline-end: 3px;
inset-inline-end: 2.4em;
inset-inline-end: calc(anchor(self-start) + 5px);
inset-inline-end: anchor-size(height);
/* <percentage> của chiều rộng hoặc chiều cao của khối chứa */
inset-inline-end: 10%;
/* Giá trị từ khóa */
inset-inline-end: auto;
/* Giá trị toàn cục */
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;
Thuộc tính viết tắt của inset-inline-start và inset-inline-end là inset-inline.
Giá trị
Thuộc tính inset-inline-end nhận các giá trị giống như thuộc tính top.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | positioned elements |
| Inherited | no |
| Percentages | logical-width of containing block |
| Computed value | same as box offsets: top, right, bottom, left properties except that directions are logical |
| Animation type | a length, percentage or calc(); |
Cú pháp hình thức
inset-inline-end =
auto |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
Ví dụ
Đặt offset cuối inline
HTML
<div>
<p class="exampleText">Example text</p>
</div>
CSS
div {
background-color: yellow;
width: 120px;
height: 120px;
}
.exampleText {
writing-mode: vertical-rl;
position: relative;
inset-inline-end: 20px;
background-color: #c8c800;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset-inline-end |
| CSS Positioned Layout Module Level 3 # propdef-inset-inline-end |
Tương thích trình duyệt
Xem thêm
- Các thuộc tính định nghĩa inset khác:
inset-block-start,inset-block-end, vàinset-inline-start - Các thuộc tính vật lý được ánh xạ:
top,right,bottom, vàleft writing-mode,direction,text-orientation