Ben Lau wrote:
This is what I'm trying to achieve: http://hellobenlau.net/wsg/eg.gif
So there'll be a div with padding top and bottom of 20px, and with
text inside. If I do:
<div style="padding:20px 0"> <p>some text</p> </div>
The gap would include both the padding and the anonymous inline boxes
(thanks Russ), which works out to be >20px. Could there perhaps be a
way to calculate the amount of white-space for these anonymous
inline boxes?
Set the line-height in em, and approximate apparent whitespace for the
chosen font family - also in em, and you'll get something like this...
<http://www.gunlaug.no/tos/alien/bl/test_09_0702-b.html>
...with the same amount of whitespace (only the pixel-sized div-padding)
on top and bottom of div, regardless of font-size.
I have "broken" one paragraph in two, but you can use separate
paragraphs if you give the top and bottom one classes and only subtract
the apparent whitespace from top and bottom respectively.
I'm not trying to achieve exact look across all browsers, I
understand it's impossible. But I'm trying to achieve to make it look
like the design at least.. in 1 browser (just so my designers are
happy).
Visual designers don't care much about reality on the web, so they
should be easy to please ;-)
FWIW: I often pull paragraphs and headlines this way, and most browsers
handle it quite well. I usually don't bother to count pixels though, as
in most cases it just has to look right.
Georg
--
http://www.gunlaug.no
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
