开发者

How to fix this kind of problem?

<!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">
<head>
<meta http-equiv="Content-Type" content="开发者_C百科text/html; charset=utf-8" />
<title>test</title>
</head>
<body>
<br /><br /><br />
<div style="line-height:150%">
<span style="display:block;font-size:240%;">test</span>
</div>
</body>
</html>

First double click on the text test,then it's highlighted,

then you can see via firebug that the <span> it's in is shorter than the text itself.

How to make the span automatically grow with the text?


Try changing line-height to 1.5


This is your original code:

<div style="line-height: 150%;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

This sets the line-height of all the elements inside the div to 150%. This percentage is relative to their computed font size. The span inherits the font-size of the div, and the line-height is calculated based on that. You set the font-size of the span to 24 times its inherited size, but the line-height is unaffected.

In short: line-height: 150% will take 150% of the element’s computed font size to compute the line height, which is equivalent to multiply it by 1.5.


As mentioned, using line-height: 1.5; instead fixes that behavior:

<div style="line-height: 1.5;">
 <span style="display: block; font-size: 240%;">Test</span>
</div>

This triggers the recalculation of the line-height based on the new font size. It sets the line-height of all the elements inside the div to 1.5 times. This percentage is relative to their actual font size. The span inherits the font-size of the div. You set the font-size of the span to 2.4 times its inherited size, and the new line-height is calculated based on that.

In short: line-height: 1.5 (without units) will multiply the element’s actual font size by 1.5 to compute the line height.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜