CSS inset 屬性
更多“自己嘗試”的例子見下文。
定義和用法
inset 屬性設定元素與父元素之間的距離。
注意：要使此屬性生效，必須指定 position 屬性。
inset 屬性是以下屬性的簡寫形式：
inset 屬性的值可以有不同的設定方式：
如果 inset 屬性有四個值
- inset: 15px 30px 60px 90px;
- 頂部距離為 15px
- 右側距離為 30px
- 底部距離為 60px
- 左側距離為 90px
如果 inset 屬性有三個值
- inset: 15px 30px 60px;
- 頂部距離為 15px
- 左右距離為 30px
- 底部距離為 60px
如果 inset 屬性有兩個值
- inset: 15px 30px;
- 上下距離為 15px
- 左右距離為 30px
如果 inset 屬性只有一個值
- inset: 10px;
- 所有四個距離均為 10px
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| inset | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
CSS 語法
inset: auto|值|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 預設值。元素的預設 inset 距離。 | 演示 ❯ |
| length | 指定 px、pt、cm 等單位的 inset。允許負值。 閱讀關於長度單位 | 演示 ❯ |
| % | 以相對於父元素尺寸的百分比指定相應軸上的距離。 | 演示 ❯ |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
示例
將 <div> 元素的 inset 屬性值設定為距離父元素頂部 15 畫素，左右距離 30 畫素，底部距離 60 畫素
div {
inset: 15px 30px 60px;
}
自己動手試一試 »
示例
將 <div> 元素的 inset 屬性值設定為距離頂部 15 畫素，右側距離 30 畫素，底部距離 60 畫素，左側距離 90 畫素
div {
inset: 15px 30px 60px 90px;
}
自己動手試一試 »
相關頁面
CSS 教程：CSS 定位
CSS position 屬性：CSS Position 屬性
CSS bottom 屬性： CSS Bottom 屬性
CSS left 屬性： CSS Left 屬性
CSS right 屬性： CSS Right 屬性
CSS top 屬性： CSS Top 屬性
