Don't stand, don't stand, don't stand so close to me

[venta]

Yet another boring geeky work question.

I have the following html:

<div style="background-color: #C7C7FE;
border-style: solid;
border-color: blue;
border-width: 0.25pt;
padding: 1pt">
<p class="instruction">Get to bed immediately.</p></div>
<div><img src="picture_of_bed.png"></div>

(OK, I've changed some of the text, but the markup's the same.)

Its job is to print "Get to bed immediately" in a nice blue box, and then a picture underneath. Unfortunately, it doesn't look very good because the picture and the blue box are jammed right up against each other instead of having space between.

The html is auto-generated (by and XSLT transform thingy), so it's not something I can do anything about without serious knowledge of XSL stylesheets. However, I could wrap another <div> tag round the <div> that contains the image, and give it some properties which added a little padding... if only I knew what those properties were.

I've tried:

<div style="padding: 1pt">
<div><img src="picture_of_bed.png"></div>
</div>

but that doesn't seem to be the answer. My html skills start to fail after headings and paragraphs, so can anyone suggest a property (or anything else) I might want to investigate ?

Comments

[qatsi.livejournal.com]

The 1pt of padding will be inside the blue border ... you probably need a margin, which will be outside it. Full gory explanation here (http://www.w3.org/TR/CSS21/box.html#box-dimensions).

Mind you, as they say, if I were going to the Post Office, I wouldn't start from here. We much prefer ems as the units of measurement, but that's on the desktop. px should produce quite predictable results too, though they don't size well if the user changes the text size; but pt really could be quite device-specific.

[floralaetifica.livejournal.com]

The border's on the div with the text, though - the image is in a separate div.