How to apply CSS directives to h3 element? -

to see mean, take @ this jsfiddle. (note: "normalized css" option set jsfiddle.)

bottom line: same css directives applied span , h3 elements produce different results (different vertical alignments , background colors).

i want vertical alignment , background color of h3.letter element shown span.letter element.

---

is there way force application of these directives h3 element?

---

(also, i'd grateful if point me specific bit of information [e.g. specific paragraph in w3c's documentation maze] make behavior described here easier understand.)

---

btw, code slight adaptation of recipe given here.

---

here's code, appease 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; } 

there 2 issues. 1 line-height: 0 have set , made h3 block element 0 heighted (so background doesn't shown) , second issue default display value each element different behavior not same.

example 1 (without line-height):

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>

example 2 (displayed both inline):

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>

here references may understand difference between inline , block elements.

inline

the default value elements. think of elements <span>, <em>, or <b> , how wrapping text in elements within string of text doesn't break flow of text. inline element accept margin , padding, element still sits inline might expect. margin , padding push other elements horizontally away, not vertically. inline element not accept height , width. ignore it.

block

a number of elements set block browser ua stylesheet. container elements, <div>, <section>, , <ul>. text "blocks" <p> , <h1>. block level elements not sit inline break past them. default (without setting width) take horizontal space can.

css-tricks: display

mdn: inline elements - block-level elements

w3.org: inline-level elements , inline boxes - block-level elements , block boxes