Question

我只是想知道当这是一个内联元素时，在span元素上指定一个高度真的是什么意思。无论我在跨度选择器的高度上设置什么值，外观都不会改变。

这是完整的标记和css

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8">
        <title>Relative Positioning</title>
        <style type = "text/css">
           p            
           {
              font-size: 1.3em;
              font-family: verdana, arial, sans-serif; 
           }
           span        
           { 
              color: red;
              font-size: .6em; 
              height: .6em;
           }
           .super      
           { 
              position: relative;
              top: -1ex; 
           }
           .sub        
           { 
              position: relative;
              bottom: -1ex; 
            }
            .shiftleft  
            { 
               position: relative;
               left: -1ex; 
            }
            .shiftright 
            { 
               position: relative;
               right: -1ex; 
            }
        </style>
    </head>
    <body>
       <p>The text at the end of this sentence 
          <span class = "super">is in superscript</span>.
       </p>

       <p>The text at the end of this sentence
          <span class = "sub">is in subscript</span>.
       </p>

       <p>The text at the end of this sentence
          <span class = "shiftleft">is shifted left</span>.
       </p>

       <p>The text at the end of this sentence
          <span class = "shiftright">is shifted right</span>.
       </p>
    </body>
</html>

//托尼

Answer 1

只要将<span> - 元素定义为inline - 元素（its default），高度值就不起作用。

来自w3.org规范10.5 Content height: the 'height' property：

此属性不适用于未替换的inline元素。有关使用的规则，请参阅the section on computing heights and margins for non-replaced inline elements。

Answer 2

Span是一个内联元素。所以它不使用height属性。如果要指定任何类型的高度，请使用display:inline-block之类的CSS！

在内联span元素上指定高度的原因

2 个答案: