Как строчные элементы рассчитывают свои размеры?

Question

Строчные элементы не имеют фиксированных размеров. Их ширина определяется содержимым, а высота — параметрами строки текста. Браузер учитывает размер шрифта и line-height. Padding влияет на визуальный размер, а margin — только по горизонтали. Это отличает inline-элементы от блочных.

YeaHub · Accepted Answer

Размеры строчных элементов рассчитываются не напрямую через CSS-свойства, а через параметры текста и контекста строки.Базовый принципСтрочный элемент участвует в формировании строки текста, поэтому его размеры подчиняются правилам inline-layout.Как формируется ширинаШирина определяется:длиной текста или inline-контенташрифтом и его метрикамивложенными inline-элементамиwidth при этом не учитывается браузером.Как формируется высотаВысота элемента рассчитывается через:font-sizeline-heightметрики шрифта (ascent и descent)Фактически элемент занимает пространство внутри строки, а не отдельный блок.Роль padding и marginПоведение отступов имеет особенности:padding увеличивает визуальный размер элементаmargin-left и margin-right работаютmargin-top и margin-bottom не влияют на расположение строкКраткий выводСтрочные элементы рассчитывают размеры через текстовые метрики и контекст строки, а не через явные width и height.