目录

CSS inset 属性

❮上一节完整的CSS参考下一节❯

示例

设置定位的 <div> 元素到父元素的距离：

div {
inset: 35px;
}

亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个inset属性设置元素与父元素之间的距离。

笔记：为了使该属性生效，它必须具有position指定的属性。

这个insetproperty 是以下属性的简写属性：

top
bottom
left
right

inset属性的值可以通过不同的方式设置：

如果 inset 属性有四个值：

插图：15 像素 30 像素 60 像素 90 像素；
- 顶部距离为 15px
- 右边距离是30px
- 底部距离为 60px
- 左边距离是 90px

如果 inset 属性具有三个值：

插图：15 像素 30 像素 60 像素；
- 顶部距离为 15px
- 左右距离均为30px
- 底部距离为 60px

如果 inset 属性有两个值：

插图：15 像素 30 像素；
- 顶部和底部距离为 15px
- 左右距离均为30px

如果 inset 属性只有一个值：

插图：10px；
- 所有四个距离均为 10px

展示演示❯

默认值：	汽车
遗传：	不
可动画：	是的。阅读可动画的尝试一下
版本：	CSS3
JavaScript 语法：	对象.style.inset="100px 50px"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
inset	87.0	87.0	66.0	14.1	73.0

CSS 语法

inset: auto| value|initial|inherit;

属性值

Value	Description	Demo
auto	Default. The element's default inset distance.	Demo ❯
length	Specifies inset in px, pt, cm, etc. Negative values are allowed. Read about length units	Demo ❯
%	Specifies distance in percent relative to size of parent element on the corresponding axis.	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

更多示例

示例

将 <div> 元素的 inset 属性值设置为从顶部和底部到父级的距离为 15 像素，从左侧到右侧的距离为 30 像素：

div {
inset: 15px 30px;
}

亲自试一试 »

示例

将 <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位置属性：CSS 位置属性

CSS底部属性：CSS 底部属性

CSS 左属性：CSS Left 属性

CSS 右属性：CSS 右属性

CSS 顶部属性：CSS 顶部属性

❮上一节完整的CSS参考下一节❯