inline-size
Свойство CSS inline-size
определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам width
и height
и зависит от свойства writing-mode
.
Интерактивный пример
Syntax
css
/* <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
inline-size =
<'width'>
Examples
Setting inline size in pixels
HTML
html
<p class="exampleText">Example text</p>
CSS
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
See also
- The mapped physical properties:
width
andheight
writing-mode