font-size и line-height

clavin · November 22, 2010

Проблема такого плана. Есть строка текста со шрифтами разных размеров. Например так:

text <span>qwerty</span>

Здесь текст в теге <span> может иметь отличный от остального теста font-size И Line-height.

Выравнивание определено как vertical-align:baseline;

Вот моя тестовая страница:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Language" content="ru" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<title></title>
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="robots" content="index,follow" />
	<link rel="icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" media="all" type="text/css" href="" />
	<style type="text/css" media="all">/*<![CDATA[*/

* {
	padding:0;
	margin:0;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, cite, code,
em, strong, img, sub, sup, tt, var,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	vertical-align: baseline;
	background: transparent;
}

a {
	cursor:pointer;
}

body {
	color:#000000;
	font-family:Arial, Helvetica, Verdana, sans-serif;
	font-variant:normal;
	font-weight:normal;
	font-size:16px;
	line-height:16px;
	background:#ffffff;
}

p {
	background:red;
}

p span {
	background:yellow;
	font-size:16px;
	line-height:16px;
}

p b {
	background:green;
	font-size:16px;
	line-height:16px;
}
	/*]]>*/</style>
</head>
<body>
	<p>some text <span>ABCypq</span> <b>bold</b><br/>
some text <span>ABCypq</span> <b>bold</b><br/>
some text <span>ABCypq</span> <b>bold</b><br/>
some text <span>ABCypq</span> <b>bold</b><br/>
some text <span>ABCypq</span> <b>bold</b><br/></p>
</body>
</html>

Высота красной области во всех браузерах равна 80px (line-height*5=80px, т.к. line-height=16px). В IE8 правда высота этой области равна 83 px почему-то.

Мне не понятно, почему если уменьшить размер шрифта внутри span (например поставить font-size:10px), то высота красной области увеличивается, как будто я увеличиваю line-height у всей строки?

p span {
	background:yellow;
	font-size:10px;
	line-height:16px;
}

Обратите внимание, что для текста задано vertical-align:baseline. Если задать, например, vertical-align:top, то высота красной области останется неизменной, но сам текст при этом будет прыгать над строкой и выглядеть не выровненным.

Edited November 22, 2010 by clavin

clavin · November 24, 2010

Тему можно было и не открывать. Реализация font-size и line-height достаточно запутана во всех браузерах. Даже Eric Mayer ничего хорошего по этому поводу не написал. Шрифты приходится делать по наитию.

Sign In

font-size и line-height

Question

clavin

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

clavin

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information