CODEWITHSUNDEEP
htmlcsswordpressinheritancefont-size
p3nchan
p3nchan

Reputation: 1534

Inherited font-size not working inside paragraph in Wordpress

I have <code> inside <p> in a Wordrpess blog. And I set the font size of <code> to inherit, in order to have the same size of parent <p>.

font-size of code tag is about 14px However, font-size of <code> is still about 14px...

font-size of p tag is about 18px ...which is still different from 18px font-size of parent <p>.

You can see the demo post. Is there any wrong setting I did on it?

Update: I've made font-size: inherit to font-size: 1.1em so to match the general size of paragraph. You can switch back to the former one to check my question.

Upvotes: 1

Views: 384

Answers (2)

Ryan Andrew Chudd
Ryan Andrew Chudd

Reputation: 56

The browser reduces the default font size by a percentage for the <code> element. In order to reset that application:

code{
  font-size: 1em;
}

This answer sets the code font-size to whatever the default browser setting is, 16px is usually the default.

http://code.stephenmorley.org/html-and-css/fixing-browsers-broken-monospace-font-handling/

Upvotes: 0

Stickers
Stickers

Reputation: 78676

I think the <code> element is special, the browser default style is 13px font size and monospace font family. It doesn't quite follow the normal CSS rules, similarly to replaced elements like <input>, <textarea> etc.

Set a fixed size code{font-size:18px;} or so, if you need to.

Further reading:

Upvotes: 1

Related Questions