为什么相同设置下行内元素span中字体的行内框高比块元素的高？

发布于
2017-09-23

更新于
2017-09-23

新手上路，请多包涵

如图所示，span中文字的背景框比p中的高出一截。其中span和p的字体大小和行高完全相同，并且已经设置了span的内外边距为0且无边框。在审查元素中发现p元素的内容区高度是一个定值，span元素的内容区高度是auto。按理来说其高度应该适应字体的大小和line-height和p的一致才对，但莫名上下高出了一截。这是今天遇到的一个问题，并不是有具体需求，但尝试了很久还是百思不得其解，希望有人能帮忙解答下十分感激！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      *{
        margin:0;
        padding:0;}    
      body{
        font-size:62.5%}        
      p{
        background-color:green;}
            
      p.special{
        height:3rem;
        line-height:3rem;
        font-size:3rem;
        text-align:center;
        background-color:blue;}
        
      span{
        line-height:3rem;
        margin:0;
        padding:0;
        border:none;
        background-color:red;}
    </style>
  </head>
  
  <body>
    <p><br><br><br></p>
    <p class="special">老友记，六人行<span>老友记，六人行</span></p>
  </body>
</html>

我个人的理解是：

是 span 内联元素的内容区比 P 块元素的内容区高，虽然他们字体大小是一样的，好像只有这个因素可能出现上述的情况。至于为什么字体大小一样内容区高度不一致这就不清楚了。（注意此处的内容区不是平时块中的 height，而是行内元素 em 框构成的内容区 css 权威指南 p189）

css html

html5

阅读 10.5k

7 个回答

王能全是谁

✓ 已被采纳

把规范复制过来了

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how. A UA may, e.g., use the em-box or the maximum ascender and descender of the font. (The latter would ensure that glyphs with parts above or below the em-box still fall within the content area, but leads to differently sized boxes for different fonts; the former would ensure authors can control background styling relative to the 'line-height', but leads to glyphs painting outside their content area.)

简单理解就是行内非替换元素背景高度由字体和字体大小决定，默认处理和行高没关系，不过这只是浏览器现在的处理方法，规范还有如下Note: