it renders fine in the browser ( or so it seems ) but when you email it out the blue border is broken up with white, see here:

I've tried to replace the bgcolor with the blue color but that also makes the white space inside blue and still pushes the 3 boxes down ever so slightly.I've also checked the height and changed the height of the jpeg but that's not made a difference

Welcome to the miserable world of email coding. My first thought was add display: block to the images, but you've done that. There are known fixes for the various email clients, so it might help if you identify which you are using (though if you are not testing this in other email clients, you are probably in for more nasty surprises).

The spacing issues you are seeing are more common to text-rendering with different email clients, on Windows even though all the fonts are managed by Windows along with anti-aliasing browsers and email clients have their own rendering engine to display that font which causes a host of issues. The easiest and quickest thing you can do is simply take the font size down 1px or remove it temporarily and that will tell you if there is indeed an issue with the overall font size in which cause you will need to stop using images for the sides of your content boxes.