kexxcream kexxcream - 2 months ago 8
CSS Question

Same font size for h1 and h2 in article

Problem:

Why do

<h1>
and
<h2>
tags have the same font size when being put inside an
<article>
?

Output:

enter image description here

Then I thought maybe it's simply my eyes who fool me so I measured it up.

enter image description here

I turned out to be the same size.

I looked at the following link (http://w3c.github.io/html/rendering.html#sections-and-headings) I learned that it is based on hierarchy but
<h1>
and
<h2>
are on the same level of hierarchy.

Accordingly,
<h1>
should be 2em and
<h2>
should be 1.5em.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Headings</title>
<meta charset="utf-8">
</head>
<body>
<article>
<h1>This is h1.</h1>
<h2>This is h2.</h2>
<h3>This is h3.</h3>
<h4>This is h4.</h4>
<h5>This is h5.</h5>
<h6>This is h6.</h6>
</article>
</body>
</html>

Answer

Size of the headers are determined by browsers stylesheet (if not specified by user stylesheet). I tried in chrome. There in developer console I found that chrome is overriding the style for h1 to 1.5em for article, aside, nav and section

:-webkit-any(article,aside,nav,section) h1 {
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
}
Comments