Высота линии CSS/H1 Размер шрифта

Question

Я не совсем уверен, что вызывает line-height для отображения по-разному в каждом браузере.

Может ли кто-нибудь дать мне подсказку о том, как это исправить?

body { 
 
    font-family: "Tahoma", sans-serif; 
 
    font-size: 13px; 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1.428571429; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
h1, h2, h3, h4, h5, h6, p { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
}

<h1 style="text-align:center"> 
 
<span style="font-size:18px">This is a textbox</span> 
 
</h1>

Answer 1

Это потому, что ваш h1 элемент использует браузер по умолчанию font-size сам, который вы не приходится. Например, в Chrome элемент h1 имеет значение по умолчанию font-size2em, которое больше 18px на вашем span элементах. Если элемент h1font-size равен меньше, чем 18px по умолчанию общая высота вашего элемента h1 будет 25px.

Чтобы избежать этого, мы можем установить h1 элемента font-size к initial:

h1 { 
    font-size: initial; 
}