Учитывая следующий HTML, какова общая высота элемента <p>? Я бы подумал, что это будет 1em, но это не так. Буквы, которые опускаются ниже базовой линии, кажется, сидят на каком-то поле, которое простирается ниже высоты шрифта.
<html>
<head>
<style>
p {
margin: 0;
padding: 0;
font-size: 1em;
font-family: serif;
border: 1px solid black;
}
</style>
</head>
<body>
<p>Lorem ipsum.</p>
</body>
</html>
Высота тега <p> не обязательно будет такой же, как размер шрифта, потому что каждый шрифт имеет встроенную высоту строки. Если вам нужно, чтобы тег <p> был определенной высоты, вам нужно указать его с помощью свойства height или line-height.
Другое преимущество использования высоты строки заключается в том, что вы можете использовать ее вместе с выравниванием по вертикали для вертикального позиционирования текста.
display:block по умолчанию) не зависит ни от каких встроенных отступов шрифта.
- person Alohci; 06.10.2014
display:inline отличается. В этом случае внутренние показатели шрифта действительно имеют значение. См. stackoverflow.com/questions/26041267/ для рабочего примера.
- person Alohci; 06.10.2014
line-height. Несмотря на то, что любое значение line-height, превышающее размер шрифта, создает пустое пространство над и под каждой строкой текста, его не следует называть отступом, особенно в контексте CSS, где padding — это отдельное свойство.
- person Jukka K. Korpela; 06.10.2014
font-heightиспользоватьline-height- person Vitorino fernandes schedule 06.10.2014line-height! - person Dhaval Marthak schedule 06.10.2014display:inline-blockиvertical-alignкромеbaselineliebdich.biz/inlineblockincss - person loveNoHate schedule 06.10.2014font-size. - person hololeap schedule 06.10.2014