CSS inset 属性
更多 “自己试试” 示例在下文。
定义和用法
The inset 属性设置元素与父元素之间的距离。
注意： 此属性需要与 position 属性一起使用才能生效。
The inset 属性是以下属性的简写属性
The inset 属性的值可以以不同的方式设置
如果 inset 属性有四个值
- inset: 15px 30px 60px 90px;
- top 距离为 15px
- right 距离为 30px
- bottom 距离为 60px
- left 距离为 90px
如果 inset 属性有三个值
- inset: 15px 30px 60px;
- top 距离为 15px
- left 和 right 距离为 30px
- bottom 距离为 60px
如果 inset 属性有两个值
- inset: 15px 30px;
- top 和 bottom 距离为 15px
- left 和 right 距离为 30px
如果 inset 属性有一个值
- inset: 10px;
- 所有四个距离都是 10px
| 默认值 | auto |
|---|---|
| 继承 | 否 |
| 可动画 | 是。 了解 animatable 试试 |
| 版本 | CSS3 |
| JavaScript 语法 | object.style.inset="100px 50px" 试试 |
浏览器支持
表格中的数字指定完全支持该属性的第一个浏览器版本。
| 属性 | |||||
|---|---|---|---|---|---|
| inset | 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
CSS 语法
inset: auto|value|initial|inherit;
属性值
| 值 | 描述 | 演示 |
|---|---|---|
| auto | 默认。元素的默认内边距距离。 | 演示 ❯ |
| length | 以 px、pt、cm 等指定内边距。允许使用负值。 了解长度单位 | 演示 ❯ |
| % | 以相对于对应轴上父元素大小的百分比指定距离。 | 演示 ❯ |
| 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 属性
