Quick Tip – Creating Space Around Your ImagesBy
Adding images to your blog or web site is a great way to create visual interest and illustrate your idea, but how do you make your image stand strong? You have to give it some space! Whitespace helps your page look clean, organized and professional.
You can add space horizontally, vertically or both. And like everything else in Web design, there are at least two ways to do everything.
If you are using style sheets, you can use the “padding” property.
Example: padding-top: 2px;
If you are using inline styles (like I frequently do when adding an image to a blog post in WordPress), you can add the “hspace” or “vspace” properties to your image source line of code.
Example: [img xsrc="your image here" alt="your alt text here" width="125" height="125" hspace="5" vspace="5" border="0" /]
**UPDATED – [img xsrc="pic.gif" mce_src="pic.gif" style="padding:2px;"/] is the preferred inline method as of HTML version 4.01 – Thanks to Phil at Unintentionally Blank for the heads up.
(note: < and > replaced with [ and ])
So, next time you want to add an image to your page, give it some breathing room and your readers will be sure to thank you!