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

[floralaetifica.livejournal.com]

Am on my way out, so haven't looked at this properly, but padding ought to do what you want - but 1pt is an insignificant amount. In fact, I wouldn't personally put it in points at all, but in pixels. 5 or 10, maybe, if you only want a little gap. 'padding: 10px;' will put space all around the image, though - if you only want it at the top then you want 'padding-top: 10px;' or 'padding: 10px 0 0 0;', or if you want it top and bottom but not left and right, then padding: 10px 0;'