WHITE SPACE - or Photos with Borders

Having been a graphic designer in a former life, I'd like to share something that, in my opinion, helps improve our blogs tremendously.

I'm sure all of you would agree, that our blogs are enhanced by adding graphics or photos.  And many of you include a graphic (or sometimes MORE than one) in your blogs.  But I notice that many of you aren't aware of something called "white space" that should surround your graphic.  Meaning, you don't want the text encroaching on the graphic.  OR more likely, you just don't know how to accomplish that. Here are a few random samplings offenders that I've found (not intending to pick on anybody in particular) from this mornings new posts.

In the sample on the left (inside the red border), you'll see that the type touches the graphic.  In the sample on the right... you can see the same, AND you'll see that since the cursor at the time was hovering over the graphic... the words "open houses in the"... showed up, because that's what the authored had "titled" the graphic.

You'll note that in both of my graphic samples, the type in my post stays a respectful distance from the graphic allowing some white space around the graphic, and helping the image stand apart.  This is what we graphic designers call WHITE SPACE.

Here's how YOU TOO can accomplish this: 

When you import a graphic, you'll come to this window.  (I'm already assuming that you know how to import a graphic by pressing the 'tree' button at the top...)  We're going to set the "alignment", the "border" and the "style".  Click in the window marked "alignment", and if you'd like it on the left side of the post, the select "LEFT".  

Then bring your cursor down the the box marked "Border"... you want to select a number that pushes the type away from the graphic enough, but not so far away as to make it an island.  I've found that "5" seems to be adequate... but you can play with that number.  So enter "5" for the moment.

Now, you'll notice that when you enter "5" it automatically FILLS in the "STYLE" box with some type.. that says "border: 5px solid black; float; left"   This means that the border will be 5 pixels, but solid BLACK, and on the left side of the post.  Place your cursor to the right of the word black, and letter by letter, delete "BLACK" and replace it with "WHITE".

IMPORTANT: Make sure you leave the semi colon in place... just remove the word black and replace with white (you could replace with red, or blue, or other colors, but again, that might mean the border would touch your type)... experiment a bit. Notice that the little sample graphic in the box... (the tree with a border around it) will adjust based on what you've changed.  If you changed 'BLACK' to 'WHITE' the border will disappear... if you change 'BLACK' to 'RED' the border turns to red.

There.. that should do it.  Press INSERT. If it didn't work... try again... make sure that all of the components we've talked about are checked correctly... 5 pixel border, change "white" to "black"  (you'll notice that the little example in the "lorum ipsum" text sample will change to reflect your selection.  If it doesn't look right in the example, it's not going to look right when you press "Insert".

I know it sounds complicated (and okay, it IS a little)...but this is an enhancement that will help your posts look far more professional.  I wouldn't be surprised if you find yourself going back to an old post or two that bothered you, and you didn't know how to fix it.

Try it... come back to me, and throw a link in the comments to show me how it worked for you. (yes, in THIS blog, you can link to your own post... it won't be considered HiJacking!).

Enjoy...  next week, I'll show you how you can make your posts serve you coffee in the morning.  (Just kiddin'... no, really... just kiddin', don't text me asking how to do it!)