inline-blockなどの横並びによる謎の隙間
css
[html]
<div class="hoge">
<div class="fuga"></div>
<div class="fuga"></div>
<div class="fuga"></div>
</div>
[/html]
[css]
.fuga{
display:inline-block;
}
[/css]
inline-blockによる謎の隙間ができる問題
改行しなかったりコメントを使ったり色々ありますがHTML自体が見辛くなったり美しくなくなったり・・・
解決法その1
[css] .hoge{ letter-spacing:-0.3em } .fuga{ display:inline-block; letter-spacing:normal } [/css]親要素で文字間隔を詰め、子要素で文字間隔を戻す。
解決法その2
[css] .hoge{ font-size:0; } .fuga{ display:inline-block; font-size:16px; } [/css]親要素のfont-sizeを0にして目的のクラスでfont-sizeを設定すると、隙間がなくなる。