Make block-level element shrink?

[Leif K-Brooks]

Sorry for sending this again, but I'm not positive it got sent right the
first time.

I need to make a block-level element shrink to its contents the same way
an inline element does, but keeping the linebreaks. Is there a way?

 

[Eric B. Bednarz]

I need to make a block-level element shrink to its contents the same
way an inline element does, but keeping the linebreaks. Is there a way?

It's hard to guess what you really want to achieve; I suppose visual
presentation, in terms of border/padding/background properties?

If so, the naughty way is something like

div
{
float: left;
clear: both;
margin: 1em;
border: thin solid ThreeDShadow;
padding: 0.5em;
color: MenuText;
background: Menu;
}

As far as I know most browsers will do what you want; it violates the
specs, however, because non-replaced floated elements require an
explicit width.

Other than that, ad-hoc tagsoup comes to mind:

div
{
padding: 1em 0;
}
div span
{
border: thin solid ThreeDShadow;
padding: 0.5em;
color: MenuText;
background: Menu;
}

<div><span>foobar</></>

 

[Lauri Raittila]

Sorry for sending this again, but I'm not positive it got sent right the
first time.

It was.

I need to make a block-level element shrink to its contents the same way
an inline element does, but keeping the linebreaks. Is there a way?

This don't work on most browsers:

div {display:inline-table}
div:after, div:before {content:"\A"}