Почему высота span не такая как у родителя при height:100%?

В случае, когда у элемента span задано свойство height: 100%, его высота не будет равна высоте родительского элемента по умолчанию. Это происходит потому, что свойство height:100% применяется в особом контексте и работает по-разному в зависимости от родительского элемента и установленных стилей.

Когда свойство height устанавливается на значение 100%, оно указывает на то, что высота элемента должна быть равна высоте его родительского элемента. Однако, для того чтобы это правило работало, для родительского элемента должно быть установлено значение высоты, отличное от значения по умолчанию, а также некоторые другие условия и ограничения могут быть применены.

В случае, когда родительскому элементу не задано явное значение высоты (например, если он имеет auto или не задано значение height), браузер не сможет расчитать высоту элемента span на основе высоты родительского элемента. В этом случае, высота элемента span будет рассчитываться исходя из контента, который он содержит.

Однако, если у родительского элемента явно задана высота (например, через свойство height или min-height), то элемент span с высотой 100% будет занимать всю доступную высоту родителя.

Также, стоит отметить, что свойство height: 100% может не работать правильно, если родительский элемент имеет позиционирование, отличное от static, или если применяются другие расположения или свойства, такие как float или clear.

В целом, для того чтобы элемент span имел высоту, равную высоте родительского элемента, необходимо убедиться, что родительскому элементу явно задана высота, отличная от значения по умолчанию, и что нет других факторов или ограничений, которые могут препятствовать применению свойства height: 100%.