How To Stop Blogger From Adding Margin or Border in Images

If you are running a blog on blogger.com where  you publish quite a lot of pictures or even some pictures maybe then you may face the problem that when you center your picture, still it is not centering then this is a problem with margin-left 1em and margin-right 1em inserted as inline style for every linked picture, creating an unwanted indentation or you want to remove the automatically added borders around the image by Blogger in many default templates..

But here we are with a solutions that you can always remove these manually from every picture, but it would be so much easier if we could stop blogger from inserting these automatically.

Example of generated HTML for every image :

<a href="(link URL)" style="margin-left: 1em; margin-right: 1em;">
     <img src="(image URL)" />
</a>

It our bad luck that We can't change the markup that Blogger adds by default to the anchor tags of images but the good luck is that we can override these problem by using CSS.

Add the following below CSS in your blog :

To add CSS , Go To Blogger Dashboard > Your blog > Template > Customise > Advanced > Add CSS

.separator a {
margin-left: 0 !important;
margin-right: 0 !important;
}
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;
}

Hope you might have not facing any problem related to this tutorial. If any error or problem occurs to you then you can ask your queries in comments.