HTML and CSS em/pixels

Question

I've been looking at em as a more responsive design over using px and I can't find anything on the conversions for things like borders and padding.

I know in font size you would do the pixel size you want divided by the default font-size (16px in most cases) but what about with borders and padding where there isn't necessarily a default?

Cheers

score 3 · Accepted Answer · answered Dec 29 '15 at 19:46

3

You simply still use the font size. Example:

body {
  font-size: 10px;
}

div {
  border-width: 2em;
}

In this case, the div has a border-width of 20px. The font-size of an element also influences the other dimensions then:

div {
  font-size: 12px;
  border-width: 2em;
}

Now the div has a border-width of 24px, despite the body's other font size.

answered Dec 29 '15 at 19:46

Boldewyn

78,902
44
148
207

1

Don't forget about `rem`! In the second example you give, you can reference the `body` font size using `rem`. – hopkins-matt Dec 29 '15 at 19:51
Really useful, thanks :-) – scottdavidwalker Dec 29 '15 at 19:52

score 1 · Answer 2 · answered Dec 29 '15 at 19:51

You can use media query for responsive design

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* STYLES GO HERE */
font-size:1em;
border-width: 2em;
}
@media only screen
and (min-device-width : 481px)
and (max-device-width : 760px) {
/* STYLES GO HERE */
font-size:1.2em;
border-width: 3em;
}

score 1 · Answer 3 · edited May 23 '17 at 11:52

1

Em inherits and scales relative to its parent. Here is an article that explains it in detail:https://j.eremy.net/confused-about-rem-and-em/

Here is a very similar question that may shed more light on em calculations: How is an em calculated?

edited May 23 '17 at 11:52

Community

1
1

answered Dec 29 '15 at 20:19

Boris

576
5
20

HTML and CSS em/pixels

3 Answers3