Paragraph. Em and Px

Hello,

I am styling my paragraphs as follows:

p {
color: #222020;
font: normal 1.0em/1.5 Arial, 'Helvetica Neue', Helvetica, sans-
serif;
margin-bottom: 8px;
text-indent: 1em;
}

What unit should I use for margin and text? px or em?

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

So in this case I should use both em for margin and text-indent?

Thanks,
Miguel

On 2009-10-18, shapper wrote:

Hello,

I am styling my paragraphs as follows:

p {
color: #222020;
font: normal 1.0em/1.5 Arial, 'Helvetica Neue', Helvetica, sans-
serif;
margin-bottom: 8px;
text-indent: 1em;
}

What unit should I use for margin and text? px or em?

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

So in this case I should use both em for margin and text-indent?

I use em for text-indent, but sometimes % for margin.

By using % for margins (and padding) you can be sure that your
total page width doesn't add up to more than 100%.

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
================================================== =================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)

In article
<119e0427-ead9-42cc-ba53-1556fbce8006 (AT) j4g2000yqa (DOT) googlegroups.com>,
shapper <mdmoura (AT) gmail (DOT) com> wrote:

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

No. It depends on the page and what exactly you are doing.

--
dorayme

shapper wrote:

Hello,

I am styling my paragraphs as follows:

p {
color: #222020;
font: normal 1.0em/1.5 Arial, 'Helvetica Neue', Helvetica, sans-
serif;
margin-bottom: 8px;
text-indent: 1em;
}

What unit should I use for margin and text? px or em?

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

So in this case I should use both em for margin and text-indent?

There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units

In article <hbgha2$jj4$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:

shapper wrote:
Hello,

I am styling my paragraphs as follows:

p {
color: #222020;
font: normal 1.0em/1.5 Arial, 'Helvetica Neue', Helvetica, sans-
serif;
margin-bottom: 8px;
text-indent: 1em;
}

What unit should I use for margin and text? px or em?

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

So in this case I should use both em for margin and text-indent?

There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units

It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.

In the url quoted:

"At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
Therefore, ex units are recommended over em units, since they are more
easily converted into evenly-rounding pixel values. Though some relative
values may scale cleanly to different font sizes, there is, once again,
potential for rounding errors. Regardless, it's still safer and easier
to calculate whole pixel values using ex units."

Just try this to see how wrong this sounds:

..pixelSet {font-size:10px;}
..emSet {font-size:1em;}

with

<p class="pixelSet">This is font-size: 10px</p>
<p class="emSet">This is font-size: 1em</p>

The "therefore" is a non-sequitur unless the assumption is that the
developer is some obsessing anal wanker type of person.

--
dorayme

On Mon, 19 Oct 2009 13:45:46 +1100, dorayme wrote:

In article <hbgha2$jj4$1 (AT) news (DOT) eternal-september.org>,
C A Upsdell <cupsdell (AT) nospam (DOT) not> wrote:



There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units

It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.

In the url quoted:

"At "normal" font sizes (the defaults on Windows systems, and possibly
Linux and others), 1 em is 10.06667 pixels, and 1 ex is 6 pixels.
Therefore, ex units are recommended over em units, since they are more
easily converted into evenly-rounding pixel values. Though some relative
values may scale cleanly to different font sizes, there is, once again,
potential for rounding errors. Regardless, it's still safer and easier
to calculate whole pixel values using ex units."

This is the same reasoning (or "reasoning") that convinces people to go
through the Clagnut contortions. I know I'm not Eric Meyer or any
world-class Web designer, but I still haven't had a situation where I had
to reliably (or at all) calculate the number of pixels my text lines would
take up. Even before my visitors zoom their text size.

--
John
I waste a lot of time every week, every day, every hour of my life on the
most unimportant things, but life's too short (even for me!) to dink around
with this kind of foolishness. And "1em" has no rounding errors.

dorayme wrote:

There is a view that ex units should be used instead of em units. I
have recently found that using ex instead of em fixed some cross-browser
issues. See:

http://kb.mozillazine.org/Em_units_versus_ex_units

It is all precious nonsense. It does not matter about small variations
and if it concerns anyone, they are obsessing about the wrong things.

What I was "obsessing about", which I solved by switching a particular
dimension from em to ex units, was a problem with a CSS-based dropdown
menu: with Opera, when the user pointed to a menu item, then moved the
cursor down to the associated dropdown menu, the dropdown menu sometimes
disappeared. IMO such a problem in a website is not unimportant.

I was more interested in fixing the problem than in determining exactly
why the switch to ex units worked, but my suspicion is this: In the CSS
used to implement the dropdown menu, a mixture of em and ex units was
used, and Opera likely handles the relationship between em and ex units
differently from other browsers, which sometimes resulted in a small
vertical gap between the menu item and its associated dropdown menu. A
small gap would normally not be important, but it was important here
because, when the cursor fell into the gap, the cursor no longer
:hovered over the menu item or dropdown menu, and so the dropdown menu
naturally disappeared. Switching completely to ex units renders
irrelevant any difference in the relationship between em and ex units.

BTW, another approach also fixed the problem: raising the dropdown menu
a bit, to overlap with the menu item with which it is associated, but
this resulted in an unpleasant visual anomaly.

C A Upsdell wrote:

I was more interested in fixing the problem than in determining
exactly why the switch to ex units worked, but my suspicion is this: In
the CSS used to implement the dropdown menu, a mixture of em and
ex units was used,

Stop right there. There you have the problem, fix it. Don't assume that em
and ex units have some specific relationship to each other. They don't. We
know that some browsers use ex = 0.5em whereas some browsers correctly treat
ex as the x-height. This can make a considerable difference.

This is far more important than some assumed bugs in rounding.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

shapper wrote:

I am styling my paragraphs as follows:

p {
color: #222020;
font: normal 1.0em/1.5 Arial, 'Helvetica Neue', Helvetica, sans-
serif;
margin-bottom: 8px;
text-indent: 1em;
}

That's much better than most paragraph styling I've seen, but
a) you're setting color without setting background
b) you're using first-line indent _and_ vertical spacing between paragraphs,
which is somewhat half-baked - if you prefer literary styling of paragraphs,
just use it, instead of additionally using half-technical paragraph styling
c) the line-height of 1.5 is perhaps a bit exaggerated, though this depends
on the text content as well as expected line length.

For text size I always use "em" but for margin and padding should I
use em when it relates to text and px otherwise?

Right. If you consider what happens when the font size is, for example, 80
pixels, you'll see why it is better that the margins (and padding) change
according to font size, instead of staying at fixed pixel values.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In article <7k260vF37ttolU1 (AT) mid (DOT) individual.net>,
John Hosking <john-nin2 (AT) bluemail (DOT) ch> wrote:

This is the same reasoning (or "reasoning") that convinces people

I would not mention this, honestly, cross my heart, if I did not know
you took a particular interest in apostrophes and quotes and stuff but
the clagnut reasoning is not so bad (I agree it is bad), that it is not
a process of reasoning. In mathematical reasoning, for example, errors
often creep in, but the process is still properly to be called reasoning.

Gosh, have I woke up in in some strange pedantic mood? I'll finish my
first cup of tea of the day and see... <g>

--
dorayme