Re: width of content+padding versus border+margin

On Fri, 15 Dec 2000, Roger Watt wrote:

>>> I'm trying to create H2 output such that the content appears with a
>>> background colour that occupies an area only moderately larger than the
>>> content itself. 
> [...]
>> <style>
>>   span {
>>     display:inline;
>>      background: #066; padding: 3pt;
>>   }
>> </style>
>> 
>> <H2><span>content</span><H2>
> 
> That works, but any approach that would require modifying all the source
> documents is not an option.

Would it be an option to serve your documents via a server-side XSLT or
Perl transformation script? Or to preprocess your files?

If so, then you can just replace <h2> with <h2><span> and </h2> with
</span></h2> and that will do it. The regular expression for that would
be:

   s/<h2>/<h2><span>/gosi;
   s/<\/h2>/<\/span><\/h2>/gosi;

Wrap that in a few lines of perl and you can create a suitably transformed
mirror of your entire content directory tree with minimal effort. :-)

 
> From section 10.3.3, it looked like it should do what I want if I were
> to specify border, padding, margin-left, and set margin-right to
> "auto". Am I not reading that correctly?

No, because the sum of those properties and width adds up to equal the
width of the _parent's_ content area. What you could do is this though:

   h2 { float: left; background: #066; padding: 0.1em; }
   h2 + * { clear: left; }

...which, in most browsers, would create a shrink-wrapped box around the
h2. This won't work nice if you have floats around headers though. Also,
IE doesn't support the sibling combinator (+) as far as I recall.

BTW: Points (pt) are not really suitable for styling web pages. If your
text happens to be shown at 1000pt (to take an extreme example) then your
3pt padding would not be visible and it would seem like there was no extra
space. Similarly if the text was being shown at 5pt, on a dense printout
for instance, the 3pt would appear huge. You probably want to use 'em' or
'%' units, as in 0.1em or 2%. 'em' units are relative to the font size,
percentages are (usually) relative to the content width.

-- 
Ian Hickson                                     )\     _. - ._.)       fL
Netscape, Standards Compliance QA              /. `- '  (  `--'
+1 650 937 6593                                `- , ) -  > ) \
irc.mozilla.org:Hixie _________________________  (.' \) (.' -' __________

Received on Friday, 15 December 2000 16:36:08 UTC