Почему высота отображается по-разному для этих пролетов?

Question

Я заметил, что высота отрезков отображается по-разному в зависимости от выбранного семейства шрифтов и родительского объекта.Например, с font-size: 14px и font-family: Helvetica или Arial, диапазон имеет высоту 17px в пределах button, но 16px в пределах a.С Verdana высота 17px для обоих пролетов.

Вот пример:

div.arial {
  font-family: Arial;
}
div.helvetica {
  font-family: Helvetica;
}
div.verdana {	
  font-family: Verdana;
}
button,
a  {
  text-transform: uppercase;
  font-size: 14px;
  text-decoration: none;
}
button {
  background: none;
  margin: 0;
  padding: 0;
  border: none;
}

<div class="arial">
  <button>
    <span>arial button 17px</span>
  </button>
  <a href="#">
    <span>arial anchor 16px?</span>
  </a>
</div>
<div class="helvetica">
  <button>
    <span>helvetica button 17px</span>
  </button>
  <a href="#">
    <span>helvetica anchor 16px?</span>
  </a>
</div>
<div class="verdana">
  <button>
    <span>verdana button 17px</span>
  </button>
  <a href="#">
    <span>verdana anchor 17px</span>
  </a>
</div>

Почему это происходит?Возможен ли обходной путь?

Answer 1

Возможно, таблица стилей агента пользователя переопределяет шрифт для span, заключенного в кнопку.Попробуйте добавить семейство шрифтов: унаследовать для кнопки css.

button {
  background: none;
  margin: 0;
  padding: 0;
  border: none;
  font-family:inherit;
}

Answer 2

В качестве обходного пути можно установить для тега a или span значение line-height: 16px;.

.

Answer 3

Попробуйте установить display: inline-block и высоту в тегах button и a.