inset
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 là viết tắt tương ứng với các thuộc tính top, right, bottom và/hoặc left. Nó có cú pháp đa giá trị giống như thuộc tính viết tắt margin.
Thuộc tính inset này, bao gồm inset, không có tác dụng trên các phần tử không được định vị.
Try it
inset: 1em;
inset: 5% 0;
inset: 2em 50px 20px;
inset: 10px 30% 20px 0;
inset: 0;
<section id="default-example">
<div class="example-container">
<div id="example-element">I am absolutely positioned.</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-container {
border: 0.75em solid #ad1457;
padding: 0.75em;
text-align: left;
position: relative;
width: 100%;
min-height: 200px;
}
#example-element {
background-color: #07136c;
border: 6px solid #ffa000;
color: white;
position: absolute;
inset: 0;
}
Mặc dù là một phần của module CSS logical properties and values, nó không định nghĩa các offset logic. Nó định nghĩa các offset vật lý, bất kể chế độ viết, hướng và hướng văn bản của phần tử.
Thuộc tính thành phần
Thuộc tính này là viết tắt của các thuộc tính CSS sau:
Cú pháp
css
/* Giá trị <length> */
inset: 10px; /* giá trị áp dụng cho tất cả các cạnh */
inset: 4px 8px; /* trên/dưới trái/phải */
inset: 5px 15px 10px; /* trên trái/phải dưới */
inset: 2.4em 3em 3em 3em; /* trên phải dưới trái */
inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto;
inset: anchor-size(block) calc(anchor(50%) + 10px) auto
calc(anchor-size(width) / 4);
/* <percentage> của chiều rộng (trái/phải) hoặc chiều cao (trên/dưới) của khối chứa */
inset: 10% 5% 5% 5%;
/* Giá trị từ khóa */
inset: auto;
/* Giá trị toàn cục */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;
Giá trị
Thuộc tính inset nhận các giá trị giống như thuộc tính top.
Định nghĩa hình thức
| Initial value | as each of the properties of the shorthand: |
|---|---|
| Applies to | positioned elements |
| Inherited | no |
| Percentages | relative to the containing block's size in the corresponding axis (e.g. width for left or right, height for top or bottom) |
| Computed value | as each of the properties of the shorthand:
|
| Animation type | a length, percentage or calc(); |
Cú pháp hình thức
inset =
<'top'>{1,4}
<top> =
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>
<length-percentage> =
<length> |
<percentage>
<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
Ví dụ
Đặt offset cho một phần tử
HTML
html
<div>
<span class="exampleText">Example text</span>
</div>
CSS
css
div {
background-color: yellow;
width: 150px;
height: 120px;
position: relative;
}
.exampleText {
writing-mode: sideways-rl;
position: absolute;
inset: 20px 40px 30px 10px;
background-color: #c8c800;
}
Kết quả
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Logical Properties and Values Module Level 1 # propdef-inset |
| CSS Positioned Layout Module Level 3 # propdef-inset |