Previous Message
Next Message

Padding and divs, basic question

Sent by Craig Cook on 21 September 2005 00:12


On 9/20/05, Scott Haneda [EMAIL-REMOVED]> wrote:
> If I have a div that is set to 120px wide, and I want to drop some text into
> it, and have that text a few pixels in from the border of the div, is there
> some way to do it without messing with the 120px side of things:
>
> .foo {
>     width: 120px;
>     border: 1px solid red;
> }
>
>
> <div class="foo">
> Something
> </div>
>
> So that's just fine, but the "Something" is butted right up on the red
> border, I want it in somewhat, but then it changes the width if I use margin
> or padding, and I am betting various browsers deal with this in different
> ways.

If your div's content is wrapped in another element, most likely a
<p>, you can apply the padding/margins to that element rather than the
container, thus avoiding any box model hacking:

div.foo { width: 120px; border: 1px solid red; }
div.foo p { margin: 10px; }

<div class="foo">
<p>Something</p>
</div>

This is actually better semantically as well, since a div is
semantically neutral and adds no inherent meaning to "Something".

--
Craig, www.focalcurve.com
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: