CODEWITHSUNDEEP
css
kjo
kjo

Reputation: 35321

How to apply CSS directives to h3 element?

To see what I mean, take a look at this jsFiddle. (Note: that the "Normalized CSS" option is set for this jsFiddle.)

Bottom line: same CSS directives applied to span and h3 elements produce very different results (different vertical alignments and background colors).

I want the vertical alignment and background color of the h3.letter element to be as shown for the span.letter element.

Is there a way to force the application of these directives to the h3 element?

(Also, I'd be grateful if someone would point me to some specific bit of information [e.g. a specific paragraph in W3C's documentation maze] that would make the behavior described here easier to understand.)

BTW, the code is a slight adaptation of the recipe given here.

Here's the code, to 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;
}

Upvotes: 1

Views: 1235

Answers (3)

emmanuel
emmanuel

Reputation: 9615

There are two issues. One with line-height: 0 that you have set and made h3 block element zero heighted (so background doesn't shown) and second issue that default display value for each element is different so behavior is not the 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 as 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 are some references that may help you understand the difference between inline and block elements.

Inline

The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn't break the flow of the text. An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically. An inline element will not accept height and width. It will just ignore it.

Block

A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

CSS-Tricks: display

MDN: Inline elements - Block-level elements

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

Upvotes: 1

Purify
Purify

Reputation: 589

Heading tags default to

display:block;

Span tags default to

display:inline;

Upvotes: 1

Hylianpuffball
Hylianpuffball

Reputation: 1561

Quick answer is that spans are display:inline while h3s are display:block. Adding a rule h3{display:inline;} will make your h3 look like the span.

Still looking for a good example online to explain this. Some CSS rules apply differently based on the display; for example, only block elements can use width rules.

MDN is pretty heavy, but has all the links to the spec: MDN display spec

Upvotes: 1

Related Questions