Встроенные элементы и высота линии

Я запутался в line-height в inline элементах. Я искал:

Но я не уверен, понимаю ли я. Я знаю, что могу сделать высоту точным, если я конвертирую в блок с дисплеем: встроенный блок. Но я пытаюсь понять, как работают линейные элементы line-height. Вот вопросы:

  • У меня есть текст font-size: 15px, но если я вижу инструменты разработчика браузера, он делает 18px. Зачем? font-size просто aproximate? или он не измеряет взлеты и падения?

  • Почему цвет фона элемента inline не имеет того же height, что и line-height? Элементы line-height in inline измеряют пространство поля строки, то есть пространство для строки сверху и снизу, но не самого элемента inline. Это объяснение?

Вот пример игры.

CSS

#block-element {
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: grey;
}
#inline-element {
  -webkit-box-sizing: border-box;
  font-family: 'verdana', sans-serif;
  font-size: 15px;
  line-height: 15px;
  text-decoration: none;
  color: black;
  margin: 0;
  background-color: green;
}
<div id="block-element">
  <a id="inline-element" href="#">
    inline element font-size:15px but height:18px real
  </a>
</div>

Ответы

Ответ 1

Это может сбивать с толку, потому что в модели встроенного форматирования существуют разные высоты.

Высота встроенного блока

Элемент с display: inline создает встроенный блок:

Встроенный блок - это тот, который является как встроенным, так и содержимым участвовать в его содержащем встроенном контексте форматирования. незаменимый элемент с display значением inline генерирует inline box.

И line-height определяет высоту этого окна:

Высота встроенного блока охватывает все глифы и их наполовину ведущий с каждой стороны и, таким образом, точно "высота линии"

Следовательно, ваша коробка, по сути, 15px высокая.

Высота строки строки

Есть также строки строк:

В контексте форматирования форматирования поля выкладываются горизонтально, один после другого, начиная с верхней части содержащего блока. Горизонтальные поля, границы и отступы соблюдаются между этими коробки. Ящики могут быть выровнены по вертикали по-разному: их днища или вершины могут быть выровнены или исходные тексты внутри них могут быть выровнены. Прямоугольная область, содержащая ящики, которые формируются строка называется полем строки.

Высота строки строки определяется правилами, указанными в раздел расчет высоты линии.

В случае, если поле строки содержит только не замененные встроенные поля с теми же line-height и vertical-align, эти правила говорят, что высота строки строки будет указана line-height.

Итак, в вашем случае это также 15px.

Высота области содержимого встроенного блока

Однако инструменты разработчика вашего браузера сказали 18px. Это потому, что те 18px являются высотой области содержимого. Это также область содержимого (вместе с прокладками), которая окрашена зеленым фоном.

Обратите внимание, что те 18px могут отличаться, потому что CSS 2.1 не определяет алгоритм:

Высота области содержимого должна основываться на шрифте, но это спецификация не определяет, как. UA может, например, использовать em-box или максимальный зажим и спусковой механизм шрифта. (Последний убедитесь, что глифы с деталями выше или ниже em-box все еще падают в области содержимого, но приводит к коробкам разного размера для разные шрифты; первый обеспечит, чтобы авторы могли контролировать фонового стиля относительно "линии-высоты", но приводит к глифам живопись вне их области содержимого.)

Если UA реализует первое предложение, высота содержимого будет определяться font-size, который определяет em-box. Это было бы то, что вы ожидали, при этом зеленый квадрат был 15px высоким.

Однако большинство УА, похоже, не делают этого. Это означает, что, вероятно, высота будет высотой самого высокого глифа в используемых font-family и font-size.

Но использование значения font-size 15px не означает, что самый высокий глиф будет 15px высоким. Это зависит от шрифта. Это несколько похоже на normal, начальное значение line-height, которое определяется как

Сообщает агентам пользователя, чтобы установить используемое значение в "разумное" значение на основе на шрифте элемента [...]. Мы рекомендуем использовать значение для 'normal' между 1.0 и 1.2.

Это означает, что если вы используете font-size: 15px, "разумный" line-height будет находиться между 15px и 18px. В шрифте "Verdana" Firefox считает, что лучше всего 18px; в "sans-serif" используется 17px.

Ответ 2

#block-element {
	font-family: 'verdana', sans-serif;
	font-size:15px; line-height:15px;
	text-decoration: none; color:black;
	margin:0;
	background-color:grey;
}


#inline-element {
	-webkit-box-sizing: border-box;
	font-family: 'verdana', sans-serif;
	font-size:15px; line-height:55px;
	text-decoration: none; color:black;
	margin:0;
	background-color:green;
  
  float:left;
}
<div id="block-element">
	<a id="inline-element" href="#"> inline element font-size:15px but height:18px real </a>
</div>