1. Web
  2. CSS
  3. Reference
  4. Properties
  5. inset-block

inset-block

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-block định nghĩa các offset đầu và cuối khối logic của một phần tử, ánh xạ đến các 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 các thuộc tính top và bottom, hoặc right và 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

inset-block: 10px 20px;
writing-mode: horizontal-tb;

inset-block: 20px 40px;
writing-mode: vertical-rl;

inset-block: 5% 20%;
writing-mode: horizontal-tb;

inset-block: 1rem auto;
writing-mode: vertical-lr;

<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;
}

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-block: 3px 10px;
inset-block: 2.4em 3em;
inset-block: 10px; /* giá trị áp dụng cho cả đầu và cuối */
inset-block: auto anchor(start);
inset-block: 10em anchor-size(--my-anchor height, 10%);

/* <percentage> của chiều rộng hoặc chiều cao của khối chứa */
inset-block: 10% 5%;

/* Giá trị từ khóa */
inset-block: auto;

/* Giá trị toàn cục */
inset-block: inherit;
inset-block: initial;
inset-block: revert;
inset-block: revert-layer;
inset-block: unset;

Giá trị

Thuộc tính inset-block nhận các giá trị giống như thuộc tính top.

Định nghĩa hình thức

Initial valueas each of the properties of the shorthand:
Applies topositioned elements
Inheritedno
Percentageslogical-height of containing block
Computed valueas each of the properties of the shorthand:
Animation typea length, percentage or calc();

Cú pháp hình thức

inset-block = 
  <'top'>{1,2}  

<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 đầu và cuối khối

HTML

html
<div>
  <p class="exampleText">Example text</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-block: 20px 50px;
  background-color: #c8c800;
}

Kết quả

Đặc tả kỹ thuật

Specification
CSS Logical Properties and Values Module Level 1
# propdef-inset-block
CSS Positioned Layout Module Level 3
# propdef-inset-block

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content