css how to make H2 tag look same as H3 tag (turned out hard!)

I'm looking for advice... for a solution to my problem.

I'm coding a new wp theme for my blog.

The problem I've encountered is this, I've links to post on homepage and on the category page (links that lead to post). On homepage this lin开发者_如何学Pythonks have h3 tag, cause of fluidity (h1 tittle of the website, h2 tittle of category, h3 post tittle). Now on category page I've different flow (h1 category name, h2 post tittle). The problem is that design wise, they must look identical... so my challenge is to make h2 on category page look same as h3 on homepage.

Turns out it's not so easy. First of all I had to use smaller font. Which is weird to me, I had to set h2 0.8em and h3 1em. Is this correct way of dealing with this issue? And than, even though I had margin 0 on both headings, some weird spacing came into being...

So this is final result, that makes h2 look as h3 (had to use smaller font, and line height on h2, and also margin-bottom more 3px more).

My question is, if this is ok way of achieving this result? or there is something wrong with my general reset file??

Including image for clearer view of the things:

http://imageshack.us/photo/my-images/33/unled1hg.jpg/

And you can see two pages live: http://artvard.com/category.html http://artvard.com/main.html

---

The problem you're having is because ems are inherited from the parent element. Think of them like percentages if it helps.

Therefore, if you set the h2 to 1em, then you have a content area like <div id="content"> which you style at 0.8em, everything within the #content div will be displayed at 0.8em. If you had a h2 element inside the #content, it would be sized at 1em, which you previously defined as 0.8em, i.e. it will appear smaller.

Since most modern browsers allow the user to increase the size of a page, the argument for using ems over px is weaker. So I would recommend either switching to px or looking carefully at your inheritance.

---

If you specify font size in em, then it will be based on the font size of the parent element, so if the tags have different parents, the same setting can result in different actual sizes.

If there is a style specifically set for h3, you could just repeat it for h2, or adjust it according to the inherited values.

If the style for h3 is based on the browser default, then you can't make h2 look the same. You can make a style for h2 that looks the same as the default for h3 in one browser, but in another browser the default for h3 will look different.

---

Best solution is to use a CSS Reset on both H2 and H3 and start styling them from there. Else there will always be properties like line height font-size etc, that may differ on each browser.

When I wrote this answer in 2011, I proposed a full reset, but currently, there is this great and commonly used Normalize.css, which resets the styling to sensible defaults, so you have a good base to start with.