Question

In the following HTML, I’d like the frame around the image to be snug — not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the right way?

Edit: One answer suggests I turn off ‘display:block’ — but this causes the rendering to look malformed in every browser I’ve tested it in. Is there a way to get a nice-looking rendering with ‘display:block’ off?

Edit: If I add ‘float: left’ to the pictureframe and ‘clear:both’ to the P tag, it looks great. But I don’t always want these frames floated to the left. Is there a more direct way to accomplish whatever ‘float’ is doing?

.pictureframe {   display: block;   margin: 5px;   padding: 5px;   border: solid brown 2px;   background-color: #ffeecc; } #foo {   border: solid blue 2px;   float: left; } img {   display: block; }

<div id='foo'>   <span class='pictureframe'>        <img alt=''         src='http://stackoverflow.com/favicon.ico' />   </span>   <p>     Why is the beige rectangle so wide?   </p> </div>

Answer 1

The right way is to use:

.pictureframe {     display: inline-block; } 

Edit: Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fit algorithm for determining the width.