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 属性
