Unwanted borders on pictures in blog post

I recently posted six pictures to a blog post all of which were edited with the same online program. five of the pictures are fine. One picture is showing white space between the edge of the image and the border on three sides only. The fourth side shows the border as it should be, flush with the edge of the image.

I submitted a request for help with the online site and following was the answer:

"Looking at the underlying JPGs for those images, they do not have borders at all. So Picnik has not added them.

It appears that your blog software is automatically adding a whitespace and border around those images. When I view your page with styles turned off, the borders disappear.

You might need to check your stylesheet for how it styles images that are linked ie, images that are inside of <a> tags."

I removed the following code from the offending pic (this code was the only diff between it and the others) and it solved the problem:

<a href="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg"> </a>

My questions: Why was this inserted in the first place and why does it make a difference? Also, how do you view a page with styles turned off?

I am using a WordPress platform for a stand alone blog with the "Revolution Code Blue" theme and working with a MacBook.

Can we have a link to that erroneous post?

Yes, the URL is here (http://nowthinkaboutit.com/2010/08/hermanus-the-hub-of-nature/)

Okay, so your original markup was <a href="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg"> <img width="225" height="168" src="http://nowthinkaboutit.com/wp-content/uploads/2010/08/Mom-chick-225.jpg" alt="" title="Mother with Chick" style="float: left; margin-right: 10px; margin-top: 5px; border: 1px solid grey;" class="alignnone size-full wp-image-1481"></a> and you removed it for the time being, right?

You've the following rule in your CSS file, which is causing that extra padding. When you remove the wrapper anchor element, the CSS selector becomes idle to this particular image. The same would happen if you opt to place the thumbnail of other images, when you insert into the post/* amazon reloaded */
#contentleft p a img { float: left; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; }

Below is what I found on the style sheets:

img.alignnone {
padding: 0px;
margin: 0px 0px 10px 0px;
display: inline;
}

There was code for left, right and center alignments but I use alignnone and then type in code for placement. I have no idea why there are four px settings.

Yes, I removed the <a href> tag for the time being. That solved the padding problem.

I have no idea why there are four px settings.


there is one "px" for each side in this order: top , left , bottom , right
if there are only 3 "px"s, then it is: top , left and right, bottom
2 "px"s is: top and bottom , left and right.
1 "px" is: all four sides