Question

在最基本的水平，只有

 <span style="border: solid 1px #000; font-size: 70px">z</span>

z在框中间很好地对齐

http://jsfiddle.net/zszpaduj/

但是一旦我开始应用

这样的字体

 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。

Answer 1

我在浏览器上运行时没有看到填充的任何差异（我在Windows上运行Chrome 40.0.2214.115）。

但是，值得一提的是，top和bottom的填充规则仅适用于块元素（如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>

底线 - 顶部和底部的填充规则可能无法提供内联元素所需的结果。

Answer 2

尝试这样的事情：

<span style="border: solid 1px #000; font-size: 70px; height: 70px; line-height: 60px;">z</span>

CSS：

body {
 font-family: arial;
}

* {
  padding: 0;
  margin: 0;

}
}

http://jsfiddle.net/confile/zszpaduj/3/

font添加了top padding

2 个答案: