inline-size - CSS（层叠样式表） 编辑

inline-size CSS 属性影响一个元素的width 或 height，以改变一个元素的盒模型的水平或垂直大小（是width还是height取决于该元素的writing-mode）。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

/* <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();

值

inline-size属性的可选值与width和height的可选值一样。

正式语法

<'width'>

示例

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 compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参阅

• The mapped physical properties: width and height
• writing-mode