Как ведут себя width и height у строчных элементов?

Question

У строчных элементов свойства width и height не применяются напрямую. Их размер определяется содержимым. Вертикальные размеры зависят от line-height и шрифта. Это часто удивляет начинающих разработчиков. Для управления размерами требуется изменить display.

YeaHub · Accepted Answer

Поведение width и height напрямую зависит от того, является ли элемент строчным или блочным.ОпределениеСтрочные элементы — это элементы с display: inline, которые располагаются внутри строки текста.Работа width и heightДля inline-элементов:width игнорируется браузеромheight игнорируется браузеромразмер определяется содержимым и шрифтомЧто влияет на визуальный размерФактическая высота строки формируется за счёт:размера шрифтаline-heightвнутренних inline-элементовКак управлять размерамиЕсли требуется задать размеры явно, используют:.element {
  display: inline-block;
  width: 100px;
  height: 40px;
}
inline-block сохраняет строчное поведение, но позволяет управлять размерами.Краткий выводУ строчных элементов width и height не работают напрямую, поэтому для контроля размеров необходимо менять display.