謎のスペース

bloggerでhtmlで表組して画像を表示しているのだけど、なんでだか左右のスペースより上下のスペースが広い。 同じhtmlファイル（CSSも含む）をアップせずに直接ブラウザで表示するとそんなことはなくちゃんと表示される。 てか、CSSでパディングとかマージンとか取ってないので隙間なく表示される。 まあ、それが正しい姿だと思うのだけど。 でbloggerにアップすると画像の間に隙間が出来てなお且つ上下のスペースは広くなっている。 ネットであっちこち調べてみたけどなかなか解決策が見つからない。 更に調べてみると、CSSをリセットすると良いみたいなページを見つけた。 でもそれはそれで大変そう。 そのページをよく読んでみると、『ブロック要素内のインライン要素にできる隙間』らしいことがわかり、解決策も出ていた。 それにとると

1. 親要素のfont-size or line-heightを「0」にするミニサイズのリセット用のCSSを適用する。
2. 中に配置されるインライン要素に「vertical-align: middle;」を適用する。
3. 中に配置される要素に「display: block;」を適用する。

と出ていたのでCSSを修正すると左右と上下のスペースが同じ広さになった。 すばらしい。 本来だったら自分のCSSで上下左右のスペースの幅を決めたいところだけど、疲れたのでこれでいいことにする。 因みに修正したCSSはこんな感じ。

    table.photo {
         table-layout: fixed;
         clear: right;
         float: left;
         margin-right: 0.5em;
         margin-bottom: 0.5em;
         border-collapse: collapse;
         padding: 0px;
         box-sizing:border-box;
         border-spacing: 0;
         vertical-align: bottom;
         font: size 0;
         line-height:0px;
    }

--
☀