Bloggerで画像の周りのスペース（余白、margin）を取る方法

Bloggerで画像を挿入すると、上記の様なHTMLに展開されます。
「margin-bottom: 1em; margin-right: 1em;」が余白の部分で、下側と右側に１文字分が設定されています。

横並びで画像を表示したい場合などで、この余白がなんとかならないのか？ということがあろうかと思います。手動で消すというのも一つの方法ですが、それだとBlogger の投稿エディタを使うメリットが半減します。

そこで以下のような方法で対応します。

1.文字サイズを指定する方法
2.余白をCSSで上書きする方法

1.文字サイズを指定する方法

.separator{
 font-size: 10px;
}

CSSに上記を追加します。
10pxの部分が文字サイズです。ここを0pxにすると余白はなくなります。

Bloggerで記事の文字サイズを変更している場合は、この余白の部分も影響を受けるので、文字が大きいと余白が大きくなって不自然になるとかの場合に、このあたりを調整すればよいかと思います。

2.余白をCSSで上書きする方法

.separator a{
 margin-bottom: 0em!important;
 margin-right: 0em!important;
}

0emのところが、余白の大きさです。
10pxとか指定して、好きな幅の余白を設定してもよいでしょう。

「!important」というのは、現状あるスタイルを上書きしますという意味で、この属性がついているほうが優先して適用されます。