CODEWITHSUNDEEP
cssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152687

What are pros and cons to use 'em' sizing unit for width, height, padding, margin, line-height in fixed width layouts?

in my projects i use em for sizing of font only with body {62.5%}?

with this method i can easily calculate em value.

so what are pros and cons if i use em sizing unit for width, height, padding, margin, line-height, even for inline images also along with font for fixed width layouts?

Upvotes: 3

Views: 2515

Answers (4)

Capi Etheriel
Capi Etheriel

Reputation: 3640

Ems are wonderful units for a good designer. It all rests on what you're taking as pixel perfect. Since most front-enders will only get an image (maybe a .psd file) from the designers, it might seem a good idea to keep every pixel as is. Which is good, except that you can't rely on web browsers to be pixel perfect.

Imagine a browser with a different font, or a font with a different aspect. Imagine a user who enlarges the default font or who zooms in (using those browsers that only enlarge the font). A margin set in px will still show up with the exact px value you gave it. An em-based margin will stretch according to the font-size.

Also, they're not that hard to work with. Define a base font-size and line-height and apply it to your (after a good reset, of course). Then change it only for the titles (you shouldn't have more than 6 titles) and for any region where it makes sense to change the font-size (a sidebar or footer). You will do 3 or 4 calculations, everyone will be happy :)

Upvotes: 6

Grant Palin
Grant Palin

Reputation: 4558

Em-sizing is useful for liquid layouts, but less so for fixed layouts. Not to say that it is useless, but a fixed layout is easier to set up using pixels. You can of course continue using ems for font sizing.

Upvotes: 1

Davor Lucic
Davor Lucic

Reputation: 29400

Well if you understand how em work you can do just about anything you can do with pixels for example but with a bit more calculation.

Actually you could do more, for example, if you have a h1 header you could specify line-height and bottom margin in em's to they always reflect the font size of that header. As you increase a font size of header you increase the margins and line-height too.

This can be used to create a dynamic vertical rhythm for example.

Also if you build a complete web site in relative units you can achieve zoom effect in older browser, etc.

But with modern browsers and if you can afford to not to support behemonts like IE6 you can use absolute units and still get a full page zoom.

Upvotes: 1

Robusto
Robusto

Reputation: 31883

The biggest downside is in indentation and text-block alignment with fonts of different sizes with em-sizing. It gets hard to line things up exactly – if that's important to you (and it should be).

Upvotes: 2

Related Questions