Add White Space To Your Images Automatically
Alice Seba recently posted on Twitter that one of her pet peeves is images without white space around it. Honestly, that drives me nuts too. I cannot stand text being squished up to the side of an image. Yeah, it’s picky but at the same time, it’s about making your site look good. I know you want it to.
Well, I for one prefer to have as little HTML in each page as possible. Therefore, I use CSS to help me. It’s not quite automatic but pretty darn close.
Here’s how you’d do it with just a little bit of CSS code.
Before you proceed, it is wise to make sure there is no code that already does this in your stylesheet. Otherwise, the browser will automatically choose one, ignore the other and you’ll be wondering why it didn’t work. First, enter this into your CSS
img.right {
float: right;
margin: 10px 0px 10px 10px;
}
img.left {
float: left;
margin: 10px 10px 10px 0px;
}
Next, whenever you are entering a picture, just decide if you want it right or left aligned. For left aligned images, use this. Note the class=”left”.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus eu augue. Aenean diam lectus, lacinia quis, varius nec,
sollicitudin eget, urna. Proin nec nisi.
That will look like this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu augue. Aenean diam lectus, lacinia quis, varius nec, sollicitudin eget, urna. Proin nec nisi.
For right aligned images, use this. Note the class=”left”:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus eu augue. Aenean diam lectus, lacinia quis,
varius nec, sollicitudin eget, urna. Proin nec nisi.
That will look like this:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus eu augue. Aenean diam lectus, lacinia quis, varius nec, sollicitudin eget, urna. Proin nec nisi.
There’s actually another method to truly automate image spacing, without using “class” but that could mess up your other images. Besides, by using a different class for left and right, you can quickly have a mix of left or right aligned quickly and easily. Also, you can use the class to align something else like maybe a text blurb.
Do You Want A Hands-Free Business?
Then get this guide to help you systemize your business so you'll have more time working on your business.
Hey! I want to make sure you know what you're getting here. In addition to the guide, you will also receive our memo that includes special offers, announcements and of course actionable information.
Lynette, I’m glad to know I’m not the only one who gets bothered by text right up against the image. I’m amazed at the number of “good” sites that do this, or the similar issue of having the text in a text box, bump up against the edges. You won’t find either on my site, but I’m saving this code for future reference.
Lynette, I’m glad to know I’m not the only one who gets bothered by text right up against the image. I’m amazed at the number of “good” sites that do this, or the similar issue of having the text in a text box, bump up against the edges. You won’t find either on my site, but I’m saving this code for future reference.
@AuntLind: Heya! I see it on many big sites too. Like nails on the chalk board to me.
@AuntLind: Heya! I see it on many big sites too. Like nails on the chalk board to me.
How would you take away the white space using a blog once you upload the photo?
How would you take away the white space using a blog once you upload the photo?
@Elizabeth: I’m not sure I understand your question. If you have space by your images you don’t want or want to reduce it, the one place to check is always the CSS.
@Elizabeth: I’m not sure I understand your question. If you have space by your images you don’t want or want to reduce it, the one place to check is always the CSS.