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

要明白我的意思，请看一看。（注意：为这个JSFIDLE设置了“规范化CSS”选项。）

底线：应用于

span

和

h3

元素的相同CSS指令会产生非常不同的结果（不同的垂直对齐和背景颜色）

我希望

h3.letter

元素的垂直对齐和背景色与

span.letter

元素的显示一致

---

有没有办法强制将这些指令应用于

h3

元素

---

（另外，如果有人能给我指出一些特定的信息（例如W3C文档迷宫中的特定段落），我将不胜感激，这些信息将使这里描述的行为更容易理解。）

---

顺便说一句，代码是对给定配方的轻微修改

---

以下是代码，以安抚SE：

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

---

快速回答是跨度是

display:inline

，而H3是

display:block

。添加规则

h3{display:inline；}

将使您的h3看起来像span

仍然在网上寻找一个好的例子来解释这一点。一些CSS规则根据显示应用不同；例如，只有块元素可以使用

width

规则

MDN相当重，但具有指向规范的所有链接：

---

标题标记默认为

display:block;

display:inline;

Span标记默认为

display:block;

display:inline;

---

有两个问题。一个是您设置并使

h3

block

元素零高度的

行高：0

，第二个问题是每个元素的默认

显示值不同，因此行为不同

示例1（无线条高度）：


div{
宽度：100px；
高度：100px；
边框：薄黑色实心；
利润率：100像素；
}
.信{
字体大小：100px；
/*线高：0px*/
背景色：#9BBCE3；
字体大小：400；
}
.支柱{
显示：内联块；
高度：100px；
}
T
T