margin-inline
试一试
组成属性
此属性是以下 CSS 属性的简写
语法
css
/* <length> values */
margin-inline: 10px 20px; /* An absolute length */
margin-inline: 1em 2em; /* relative to the text size */
margin-inline: 5% 2%; /* relative to the nearest block container's width */
margin-inline: 10px; /* sets both start and end values */
/* Keyword values */
margin-inline: auto;
/* Global values */
margin-inline: inherit;
margin-inline: initial;
margin-inline: revert;
margin-inline: revert-layer;
margin-inline: unset;
此属性对应于 margin-top
和 margin-bottom
,或者 margin-right
和 margin-left
属性,具体取决于 writing-mode
、direction
和 text-orientation
定义的值。
margin-inline
属性可以使用一个或两个值指定。
- 当指定 **一个** 值时,它会将相同的外边距应用于 **起始和结束**。
- 当指定 **两个** 值时,第一个外边距应用于 **起始**,第二个应用于 **结束**。
值
margin-inline
属性采用与 margin
属性相同的值。
正式定义
初始值 | 与简写中的每个属性相同 |
---|---|
应用于 | 与 margin 相同 |
继承 | 否 |
百分比 | 取决于布局模型 |
计算值 | 与简写中的每个属性相同
|
动画类型 | 一个 长度 |
正式语法
margin-inline =
<'margin-top'>{1,2}
<margin-top> =
<length-percentage> |
auto
<length-percentage> =
<length> |
<percentage>
示例
设置内联起始和结束外边距
CSS
css
div {
background-color: yellow;
width: 120px;
height: auto;
border: 1px solid green;
}
p {
margin: 0;
margin-inline: 20px 40px;
background-color: tan;
}
.verticalExample {
writing-mode: vertical-rl;
}
HTML
html
<div>
<p>Example text</p>
</div>
<div class="verticalExample">
<p>Example text</p>
</div>
结果
规范
规范 |
---|
CSS 逻辑属性和值级别 1 # propdef-margin-inline |
浏览器兼容性
BCD 表格仅在浏览器中加载