如何将CSS指令应用于h3元素？

看看我的意思，看看this jsFiddle。（注：为此jsFiddle设置了“标准化CSS”选项。）如何将CSS指令应用于h3元素？

底线：应用于span和h3元素的相同CSS指令会产生非常不同的结果（不同的垂直对齐和背景颜色）。

我希望元素的h3.letter元素的垂直对齐和背景颜色如span.letter元素所示。

有没有办法迫使这些指令到h3元素的应用程序？

（另外，我会很感激，如果有人点我到一些信息的特定位[例如，在W3C的文档迷宫的特定段落这里描述，将使行为更容易理解。）

顺便说一句，代码是here给出的配方略有改动。

下面的代码，安抚SE：

<div> 
    <span class="letter">T</span> 
    <span class="strut"></span> 
</div> 
<div> 
    <h3 class="letter">T</h3> 
    <span class="strut"></span> 
</div>

div { 
    width: 100px; 
    height: 100px; 
    border: thin black solid; 
    margin: 50px; 
} 
.letter { 
    font-size: 100px; 
    line-height: 0px; 
    background-color: #9BBCE3; 
} 
.strut { 
    display: inline-block; 
    height: 100px; 
}

来源

2015-05-31 kjo

有两个问题。一个与line-height: 0，你已经设置和制作h3block元素零高度（所以背景不显示）和第二个问题，每个元素的默认值display是不同的，所以行为是不一样的。

实施例1（无线高度）：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: thin black solid; 
 
    margin: 100px; 
 
} 
 
.letter { 
 
    font-size: 100px; 
 
    /* line-height: 0px; */ 
 
    background-color: #9BBCE3; 
 
    font-weight: 400; 
 
} 
 
.strut { 
 
    display: inline-block; 
 
    height: 100px; 
 
}

<div> <span class="letter">T</span> 
 
    <span class="strut"></span> 
 
</div> 
 
<div> 
 
    <h3 class="letter">T</h3> 
 
    <span class="strut"></span> 
 
</div>

实施例2（同时显示为内联）：

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    border: thin black solid; 
 
    margin: 100px; 
 
} 
 
.letter { 
 
    font-size: 100px; 
 
    /* line-height: 0px; */ 
 
    background-color: #9BBCE3; 
 
    font-weight: 400; 
 
    display: inline; 
 
} 
 
.strut { 
 
    display: inline-block; 
 
    height: 100px; 
 
}

<div> <span class="letter">T</span> 
 
    <span class="strut"></span> 
 
</div> 
 
<div> 
 
    <h3 class="letter">T</h3> 
 
    <span class="strut"></span> 
 
</div>

这里有一些参考该可以帮助你了解之间的区别和block元素。

内嵌

为元素的默认值。想想像<span>,<em>, 或<b>这样的元素，以及如何将文本包装到文本字符串中的这些元素中不会中断文本流。内联元素将接受余量和填充，但该元素仍然以内联方式存在，因为您可能会想到。保证金和填充只会将其他元素横向推出，而不是垂直。一个内联元素将不会接受高度和宽度。它会忽略它。

块

一些元件被设置由浏览器UA样式表来阻止。它们通常是容器元素，如<div>,<section>和<ul>。此外文字“块”像<p>和<h1>。块级元素并不坐在内嵌，但突破它们。默认情况下（不设置宽度），它们会尽可能多地占用水平空间。