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

Поведение 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.