OK, first of all, div's default to display: block, so setting that is
the same as not setting display: at all. The purpose of div is to be
the generic block-display container, just as span is the generic
inline-display container.
By definition, absent explicit positioning, a block element is a
full-width element with regard to the normal flow of text. So your
border goes all the way across.
If you set the div to display: inline, then it becomes part of the
normal flow of text and is positioned in terms of the text baseline.
You can still set margins, and you should see those margins on the
left and right, but since setting a margin doesn't affect the
line-height, the top and bottom margins will be invisible. (As
probably mentioned in the "margin-top/bottom on span" thread that you
cited.)
I'm not sure what you're trying to accomplish; if the border collapses
around the text, then that will make the margins *appear* to be larger
than what you have set. But I believe you should be able to achieve
the desired effect by using the "inline-block" display value.
On 10/18/06, Mark Wheeler <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> Ok, I've been following the "why margin-top/bottom don't work for
> span class?" thread, and have an offshoot question that has been
> bugging me for some time. Say I have a div that has a little bit of
> content such as:
>
> .div1 {
> border: 1px solid red;
> padding: 5px;
> margin: 5px 10px;
> }
>
> <div class="div1">This is the content</div>
>
> And I want to be able to set the margins and padding to what ever I
> like, such as the above, how do I get the border to collapse around
> the content? If set .div1 to:
>
> display: block;
>
> I get my margins and padding, but the div width (shown by the border
> around the div) is the complete width of the page, and if I set .div1
> to:
>
> display: inline;
>
> I don't get my margins, but the border now does collapse to the
> content width.
>
> I've been muddling through CSS for some time and LOVE It, but still
> have some things I don't understand. Perhaps I am using the wrong
> "display" model. Anyone who can enlighten me on this would be greatly
> appreciated.
>
> Thanks,
>
> Mark
> ______________________________________________________________________
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
--
Mark J. Reed <[EMAIL PROTECTED]>
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
