Отступы вверху и встроенные элементы

В CSS свойство поля используется для определения интервала за пределами границ элемента. Однако при использовании поля верхнего края для встроенных элементов, особенно в Firefox, возникает распространенная проблема.

Проблема:

Почему верхний край поля игнорируется для встроенных элементов в Firefox?

Ответ:

Это поведение не является эксклюзивным для Firefox, но определено в CSS 2.1 Спецификация:

CSS 2.1 Спецификация свойств полей:

"Вертикальные поля не будут оказывать никакого влияния на незаменяемые встроенные элементы."

Объяснение:

Встроенные элементы, например текст, Теги и теги не имеют определенной высоты и ширины и обычно отображаются как одна строка содержимого. Margin top, свойство вертикального поля, пытается создать пространство над встроенным элементом. Однако, поскольку у встроенного элемента нет высоты для размещения поля, он игнорируется.

Вывод:

Согласно спецификации CSS, поле верхнего края неприменимо к встроенные элементы. Чтобы добавить вертикальное пространство над строковыми элементами, рассмотрите возможность использования других параметров, таких как line-height или Padding-top.