如何將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>。塊級元素並不坐在內嵌，但突破它們。默認情況下（不設置寬度），它們會盡可能多地佔用水平空間。