Размеры элемента

inline-size

Свойство CSS inline-size определяет горизонтальный или вертикальный размер блока элемента в зависимости от режима его записи. Он соответствует свойству width или height , в зависимости от значения режима writing-mode .

Если режим записи ориентирован вертикально, значение inline-size относится к высоте элемента; в противном случае это относится к ширине элемента. Связанное свойство — это block-size , который определяет другое измерение элемента.

Try it

Syntax

 / * значения * / inline-size: 300px; inline-size: 25em; / * значения * / inline-size: 75%; / * Значения ключевых слов * / inline-size: max-content; inline-size: min-content; inline-size: fit-content(20em); inline-size: auto; / * Глобальные значения * / inline-size: inherit; inline-size: initial; inline-size: revert; inline-size: revert-layer; inline-size: unset;

Values

Свойство inline-size принимает те же значения, что и свойства width и height .

Formal definition

Initial value	auto
Applies to	такой же как width и height
Inherited	no
Percentages	внутренний размер блока
Computed value	такой же как width и height
Animation type	длина , процент или calc ();

Источник

inline-size

The inline-size CSS property defines the horizontal or vertical size of an element’s block, depending on its writing mode. It corresponds to either the width or the height property, depending on the value of writing-mode .

If the writing mode is vertically oriented, the value of inline-size relates to the height of the element; otherwise, it relates to the width of the element. A related property is block-size , which defines the other dimension of the element.

Try it

Syntax

/* values */ inline-size: 300px; inline-size: 25em; /* 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: revert; inline-size: revert-layer; inline-size: unset; 

Values

The inline-size property takes the same values as the width and height properties.

Formal definition

Initial value	auto
Applies to	same as width and height
Inherited	no
Percentages	inline-size of containing block
Computed value	same as width and height
Animation type	a length, percentage or calc();

Formal syntax

Источник

Строчные элементы

Строчными называются такие элементы, которые являются непосредственной частью строки, у них значение свойства display установлено как inline . Элементы, для которых это значение задано по умолчанию, — , , , и др., в основном они используются для изменения вида текста или его смыслового выделения.

Особенности строчных элементов

Перечислим характерные особенности строчных элементов.

Свойства, связанные с размерами (width, height), не применимы.

Размеры строчных элементов определяются их содержимым и не могут напрямую меняться с помощью свойств width и height , которые, соответственно, задают ширину и высоту элемента. Добавление этих свойств к строчным элементам просто игнорируется.

Размер элемента равен его содержимому плюс значения margin, border и padding.

Несмотря на то, что явно задать размеры элемента нельзя, на него можно влиять косвенно с помощью свойств margin , border и padding , значения которых суммируются с размерами содержимого (пример 1).

Пример 1. Размеры элемента

Заголовок

В данном примере внутрь блочного элемента добавлен строчный элемент и для него уже заданы свойства margin , padding и border . Это сделано для того, чтобы линия была строго под текстом (рис. 1), а не на всю длину блока, как получилось бы, добавь мы border для h1 напрямую.

Заметьте одну особенность — для строчных элементов margin работает только по горизонтали, но никак не вертикали. Таким образом, свойства margin-top и margin-bottom не действуют.

Срочные элементы переносятся на другую строку при необходимости.

Раз мы имеем дело со строками, то текст, естественно, переносится, чтобы строка целиком поместилась по ширине. Перенос текста, как правило, происходит в месте пробела и может разделить наш строчный элемент на две части и более. Это не страшно, пока к элементу не применяется стилевое оформление. На рис. 2 показано, как фон и рамка разбивается на две части.

Чтобы запретить перенос текста внутри элемента, добавьте свойство white-space со значением nowrap (пример 2).

Перенос текста считается за пробел.

В коде HTML любой перенос текста воспринимается браузером как пробел, это касается и размещения элементов на отдельных строках. Сравните два абзаца в примере 3. В первом абзаце каждый располагается на отдельной строке, а во втором абзаце код идёт сплошной строкой без пробелов и переносов.

Пример 3. Перенос но новую строку

Результат данного примера показан на рис. 3. В первой строке между цветных прямоугольников появилось небольшое пространство, а вторая строка выглядит сплошной.

Рис. 3. Пробелы между элементами

В строчно-блочных элементах мы ещё вернёмся к этой особенности.

Можно выравнивать по вертикали с помощью свойства vertical-align.

Свойство vertical-align выравнивает элементы относительно друг друга по вертикали, что позволяет делать верхний и нижний индексы, задавать выравнивание содержимого ячеек таблицы, задавать положение блоков и др. В примере 4 показано выравнивание картинок и текста по середине друг друга.

Пример 4. Использование vertical-align

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинок и текста

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline и преобразование блочного элемента в строчный (пример 5).

Результат данного примера показан на рис. 5.

Внимание! Превращение элемента в строчный не даёт право нарушать структуру кода HTML и порядок вложения элементов.

Надо понимать, что HTML и CSS проверяются независимо друг от друга и какие бы вы манипуляции не производили с элементами через стили, на HTML это не оказывает влияние. Код HTML в любом случае должен быть корректным с точки зрения синтаксиса HTML.

Источник

width

Свойство width отвечает за ширину элемента. С его помощью мы можем увеличивать или уменьшать ширину строчно-блочных ( inline — block ) и блочных ( block ) элементов. На строчные элементы это свойство не будет иметь никакого влияния.

Строчно-блочные ( inline — block ) элементы по умолчанию подстраиваются под ширину контента, лежащего у них внутри.

Блочные ( block ) элементы по умолчанию имеют ширину 100%. Если представить сайт как документ с текстом, то блочный элемент займёт всю строку, на которой стоит.

Кроме фиксированной ширины можно задавать элементу минимальную ширину min — width или максимальную ширину max — width .

В современном CSS есть логический аналог этого свойства — inline — size .

Пример

Скопировать ссылку «Пример» Скопировано

 
Я — блочный элемент! 
Я
строчно-блочный
элемент! div class="block">Я — блочный элемент!div> div class="inline-block">Яdiv> div class="inline-block">строчно-блочныйdiv> div class="inline-block">элемент!div>    Скопировать Скопировано Не удалось скопировать   

Не меняем display для .block , поскольку уже является блочным:

 .block  background-color: #2E9AFF;> .inline-block  display: inline-block; background-color: #F498AD;> .block  background-color: #2E9AFF; > .inline-block  display: inline-block; background-color: #F498AD; >    Скопировать Скопировано Не удалось скопировать   

Теперь любой текст будет занимать не больше, чем 50% от ширины карточки 🎉

Источник

inline-size

Определяет размер элемента по строчной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма ( writing-mode: horizontal-tb ) строчная ось будет горизонтальной и inline-size устанавливает ширину элемента. Для вертикального направления письма ( writing-mode: vertical-lr и writing-mode: vertical-rl ) строчная ось будет вертикальной и inline-size устанавливает высоту элемента.

На рис. 1 показаны варианты inline-size при разных значениях writing-mode

а. writing-mode: horizontal-tb, строчная ось располагается горизонтально

б. writing-mode: vertical-lr, строчная ось располагается вертикально

в. writing-mode: vertical-rl, строчная ось располагается вертикально

Рис. 1. Размер элемента по строчной оси

Краткая информация

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи размер элемента вычисляется в зависимости от размера родительского элемента.

auto Устанавливает размер, исходя из типа и содержимого элемента.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Размер блока при вертикальной ориентации

Объектная модель

Объект.style.inlineSize

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Источник