StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>An <code>em</code> comes from the typographical term of the same name. It is the width of the letter 'm' in the current font. If you set a width to, say, <code>10em</code>, then the width <em>will be fixed</em> at 10 times the width of an 'm'.</p> <p><code>%</code> is a number of hundredths of a whole. It describes a size that is dependent on its potential maximum. So, assuming a simple web page viewed in a browser window, with no columns or anything, a width of <code>50%</code> means half (50/100) of the width of the window. The actual width <em>will change with the width of the window.</em> If you printed the page out, then the width changes to half the width of the printable area on the paper.</p> <p>Which one you use depends on whether or not you need the dimension in question to adjust with window size. If you need it to adjust, use <code>%</code>. If you need it to remain a fixed dimension, use <code>em</code>.</p> <p>EDIT: Ah, relating to the <code>font-size</code> descriptor. Referring to some <a href="http://reference.sitepoint.com/css/font-size" rel="nofollow noreferrer">online docs</a> I use, <code>font-size</code> with a <code>%</code> makes the font size relative to its parent. What's the parent of <code>body</code>? A good question that my reference doesn't answer. I would assume it's either a higher-level specifier (i.e. one that would be overridden) in the CSS, or the document default.</p> <p>As for <code>em</code>, that one takes the length in ems (as defined above) and converts that to a font size (by, say, converting to mm then to points). Since most fonts don't have an em equal to the line height, I wouldn't expect <code>1em</code> to mean the same as <code>100%</code>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload