Я запутался в line-height
в inline
элементах. Я искал:
- http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced
- http://www.w3.org/wiki/CSS/Properties/line-height
- https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Но я не уверен, понимаю ли я. Я знаю, что могу сделать высоту точным, если я конвертирую в блок с дисплеем: встроенный блок. Но я пытаюсь понять, как работают линейные элементы line-height. Вот вопросы:
-
У меня есть текст
font-size: 15px
, но если я вижу инструменты разработчика браузера, он делает18px
. Зачем?font-size
просто aproximate? или он не измеряет взлеты и падения? -
Почему цвет фона элемента
inline
не имеет того жеheight
, что иline-height
? Элементыline-height
ininline
измеряют пространство поля строки, то есть пространство для строки сверху и снизу, но не самого элемента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>