When inserting images into a web page it’s easy enough to add hspace and vspace so you move surrounding text away from the edge of the image, and make it look better and easier to read.
It doesn’t work with an iframe however. I don’t use them a lot myself, but sometimes I have a need. Mostly, when I have needed to use one, they have been big enough to center in the middle of a page, rather than wrap text around it.
However, I wanted to add a small iframe to a page, and surround it with text, with some space between. So I tried hspace but that didn’t work. Anyway, after thinking about it a little the answer is quite simple.
Put the iframe in a div display block, float it left (or right of course), and add a margin.
Like this:
<div style=”display:block;float:left;margin: 5px 5px 5px 5px;”>
<iframe src=”http://somesite.com” scrolling=”no” width=”375″ height=”95″ frameborder=”0″ ></iframe></div>
You can check out what I trying to achieve at http://northamericanbroadcasting.com. I wanted to get the “now playing” window just where it is, with some space.