在最基本的层面上只有
<span style="border: solid 1px #000; font-size: 70px">z</span>
z 在框的中间垂直对齐
但是一旦我开始应用诸如
之类的字体 body {
font-family: Arial;
}
z 从顶部填充了一点。
http://jsfiddle.net/zszpaduj/1/
我用过
* {
padding: 0;
margin: 0;
}
添加的空间仍然存在
http://jsfiddle.net/zszpaduj/2/
这是什么原因造成的？
我在 OSX 上使用 Chrome 40.0.2214.115。
最佳答案
当我在我的浏览器上运行它时，我没有看到任何填充差异(我在 Windows 上运行 Chrome 40.0.2214.115)。
然而，值得一提的是，顶部和底部的填充规则仅适用于 block 元素(如 div)，但不适用于内联元素(如 span).您可以在行内元素的顶部和底部添加内边距，但这不会影响其周围其他内联元素的间距，因此内边距会覆盖其他内联元素。
例如，将下面的代码复制粘贴到一个文件中，然后在 Chrome 中打开它。
<html>
<head>
<style type="text/css">
span {
border: 1px solid #000;
font-size: 70px;
font-family: Arial;
padding: 40px 0px;
}
</style>
</head>
<body>
<span>I'm</span><span>a</span><br>
<span>legend</span>
</body>
</html>
底线 - 顶部和底部的填充规则可能不会为内联元素提供您想要的结果。
关于html - 字体添加顶部填充，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28844846/