Blogger Tip: Removing Border and Padding From Images

Sometimes you'll want to remove the padding and border that Blogger.com automatically adds to images. In setting up some posts for Constellar I had to do a bit of HTML trickery when I was setting up the app store download link like this:

Obviously the border and padding around the image aren't desirable, and keep the two images from lining up correctly.  Fixing this wasn't too terribly difficult.

In the Edit Post dialog you just have to select the "HTML" button, find the image you want to remove the border from and add the following:

style="border: none; margin-right: 4px; padding: 0px;"

As an example, here's how the HTML code for the Constellar app icon looks:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihSmSR4aPHZbYCngn47d_hB5hnrdgKGmKXguxgpjFHNsQd3r5FF6BColY-_PLO_HHps3SJkeHTp4_lniPUOVXIj4aubqS1CAPmWatLsPPuo0Fu-7IUCPjJPO6O4C3ezWhTL1rivP1lxCY/s400/Logo40Rounded.png" style="border: none; margin-right: 4px; padding: 0px;" />

 And here's what the final result looks like:

I hope this helps anyone trying to achieve the same effect.