我有点迷茫... 谁能告诉我，“T”上方和下方的额外空间从何而来？
“line-height”与“font-size”的值完全相同。我希望 div 应该与“T”本身具有相同的高度...
谢谢!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#container {
font-size: 50px;
background-color: lime;
line-height: 50px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">T</div>
</body>
</html>
最佳答案
这就是 line-height 应该做的:使一行足够高以便可读并防止行相互重叠。 line-height 是根据 font-size 属性计算的。默认情况下它等于 1.2em。
将 font-size 设置为 50px 并不意味着您的所有字符都将具有 50px 高度。作为spec says :
The font size corresponds to the em square, a concept used in typography.
Note that certain glyphs may bleed outside their em squares.
了解 em 方 block :wikipedia link .
所以你在这里得到的“边距”是在字体本身上，因为 'T' 字符的高度不等于 1em。
看看this documentation .你会更好地理解这个属性。
关于html - div 内的额外空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20334104/