Свойство CSS inline-size
определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам 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.
Syntax
/* <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) — вертикальный, значение inline-size
относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — block-size
, которое определяет другие размеры элемента.
Значения
Formal definition
Начальное значение | auto |
---|---|
Применяется к | с такими же width и height |
Наследуется | нет |
Проценты | встроенный размер содержащего блока |
Обработка значения | с такими же width и height |
Animation type | длина, проценты или calc(); |
Formal syntax
Examples
Setting inline size in pixels
HTML
<p class="exampleText">Example text</p>
CSS
.exampleText {
writing-mode: vertical-rl;
background-color: yellow;
inline-size: 110px;
}
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Logical Properties and Values Level 1 Определение 'inline-size' в этой спецификации. |
Редакторский черновик | Initial definition |
Browser compatibility
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.
See also
- The mapped physical properties:
width
andheight
writing-mode