Question

要了解我的意思，请查看this jsFiddle。（注意：为此jsFiddle设置＆＃34;规范化CSS＆＃34;选项。）

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

我希望h3.letter元素的垂直对齐和背景颜色与span.letter元素的显示相同。

有没有办法强制将这些指令应用到h3元素？

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

BTW，代码略微改编了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;
}

Answer 1

快速回答是跨度为display:inline，而h3为display:block。添加规则h3{display:inline;}将使您的h3看起来像跨度。

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

MDN非常繁重，但拥有规范的所有链接： MDN display spec

Answer 2

标题标签默认为

display:block;

跨度标签默认为

display:inline;

Answer 3

有两个问题。已设置line-height: 0并且h3 block元素为零的一个（因此背景未显示）和第二个问题，即每个元素的默认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>

以下是一些可以帮助您了解inline和block元素之间差异的参考资料。

<强>内联

元素的默认值。想想像<span>，<em>这样的元素，   或<b>以及如何在文本字符串中包含这些元素中的文本   不打破文本的流动。内联元素将接受   margin和padding，但元素仍然像你一样内联   期望。边距和填充只会水平推动其他元素   离开，而不是垂直。内联元素不接受高度和   宽度。它会忽略它。

阻止

浏览器UA样式表将许多元素设置为阻止。   它们通常是容器元素，例如<div>，<section>和<ul>。   同时发送文字“块”，例如<p>和<h1>。块级元素不会坐下   内联但突破了它们。默认情况下（不设置宽度）   占用尽可能多的水平空间。

CSS-Tricks：display

MDN：Inline elements - Block-level elements

w3.org：Inline-level elements and inline boxes - Block-level elements and block boxes

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

3 个答案: