inline-size
inline-size
CSS 属性影响一个元素的width
或 height
,以改变一个元素的盒模型的水平或垂直大小(是width还是height取决于该元素的writing-mode
)。
语法
/* <length> values */
inline-size: 300px;
inline-size: 25em;
/* <percentage> values */
inline-size: 75%;
/* Keyword values */
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;
/* Global values */
inline-size: inherit;
inline-size: initial;
inline-size: unset;
如果元素的writing-mode是垂直方向的它会影响height,否则默认是影响width。
有一个与inline-size 属性有关的block-size
,它定义了元素的其他尺寸。
初始值 | auto |
---|---|
适用元素 | same as width and height |
是否是继承属性 | 否 |
Percentages | inline-size of containing block |
计算值 | same as width and height |
Animation type | a length, percentage or calc(); |
值
正式语法
示例
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
inline-size: 110px;
}
规范
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 inline-size |
Editor's Draft | Initial definition |
浏览器兼容性
BCD tables only load in the browser
参阅
- The mapped physical properties:
width
andheight
writing-mode