Prev: using Avant Garde font
Next: enforcing margins by munging existing document
From: shapper on 18 Oct 2009 19:01
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
From: Chris F.A. Johnson on 18 Oct 2009 19:30
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)
From: dorayme on 18 Oct 2009 20:16
In article
<119e0427-ead9-42cc-ba53-1556fbce8006(a)j4g2000yqa.googlegroups.com>,
shapper <mdmoura(a)gmail.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
From: C A Upsdell on 18 Oct 2009 22:01
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
From: C A Upsdell on 19 Oct 2009 00:54
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.



 |  Next  |  Last
Pages: 1 2 3 4
Prev: using Avant Garde font
Next: enforcing margins by munging existing document