Which the best way use em and px together?

HTML & CSS
1

I have 2 questions, hope everyone can help me out. Thank in advance.

1st. I want to use em and px together. So in the body tag, i set like this:


body{
    font-size: 100%;
}

body{
    font-size: 16px;
}

That means 100% = 16px = 1em, is it right?. And then, I wanna use em for anchor tag, so i set this code:


a{
    font-size: 0.6875 em; /* 11px/16px = 0.6875 em
}

2nd. I set padding for anchor tag but the background doesn’t expand. See image for detail

And check my code here:

http://codepen.io/thehung1724/pen/CGgLu

I wanna my top menu works like this:

http://forca.orange-themes.com/html/
2

No, not really. The second rule overrides the first, so the first becomes irrelevant. Certainly, you are now setting your base font size to 16px, but that’s not a great idea. Best not to force sizes on users.

3

thank you. What about second question?

4

For the second issue, the padding won’t do much unless you set the anchor to something like display: block or diaply: inline-block:

.header-top .top-nav li a {
padding: 12px;
font-size: 0.6875em;
font-weight: bold;
color: #979797;
[COLOR="#FF0000"]display: block;[/COLOR]
}
5

If i set display: block, it have some spaces between anchor tag, how can i remove that?

6

You need to be a bit more specific. Add in the code and then indicate what you want to change.

7

thank you, so back to the 1st question. Now i set body: 16px, then i want to set h2 tag is 11px by using em then i set h2: 0.6875 em (16px/11px), is it right?

8

There is no relationship between em and px - forget trying to calculate one from the other. Whenever anyone zooms the text to make it either larger or smaller the px will stay the same and the em will get bigger or smaller.

You should use one or the other for the text on your page and not try to mix them or your page will break.

em is intended for defining text size.

px is intended for defining border widths and image sizes.

9

thank you so much. Now i’ll use em for body size and px for border and img size. Could you provide me heading size common uses?