Question

我有点困惑...... 任何人都可以告诉我，“T”上方和下方的这个额外空间来自哪里？

“line-height”与“font-size”具有完全相同的值。我期望div应该与“T”本身具有相同的高度......

谢谢！

The 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>

Answer 1

这是line-height应该做的事情：使线条足够高以便可读并防止线条相互重叠。 line-height的计算取决于font-size属性。默认情况下，它等于1.2em。

设置font-size 50px并不意味着您的所有角色的身高都会50px。正如spec says：

字体大小对应于em 广场，印刷术中使用的概念请注意，某些字形可能会出血在他们的em广场之外。

了解em square：wikipedia link。

所以你得到的“边距”是字体本身，因为'T'字符的高度不等于1em。

看看this documentation。你会更好地理解这个属性。

Answer 2

据我所知，基本上这是字体渲染的问题，但是有一个非常简单的解决方法。

CSS

div {
    background-color: green;
    font-size: 45px;
    display: inline-block;
    margin: 10%;
    color: white;
    line-height: 1em; /* Normal Line Height */
    line-height: 0.8em; /* The One that Fixes the Problem */
}

HTML

<div>T</div>

这是Fiddle，如果您还有其他问题请告诉我。

Answer 3

除了height和div

之外，还可以设置line-height的{{1}}

div内的额外空间

3 个答案: