画像の隙間を埋める方法

質問

CSSで li {display: inline} を記述すると水平方向に並んだ画像の隙間は消えるのですが <a href =""> でリンクを貼った部分の隙間が消えません。何か良い方法をご存知でしたらご教示お願いします。

回答No.2

DrFell

水平方向の隙間が消えるということは垂直方向に隙間があるという意味でしょうか？

よくあるパターンで、画像を文章のどの部分にあわせるかで失敗しているのでは？と推察します。

アメリカ生まれなhtmlなので、和文のように文字の下が決まっていません。ＡＢＣの下にあわせるbacelineパターンとygjのようにそれよりも下のピョコンとした下に合わせるbottomパターンがあります。

li img{
vertical-align:bottom;
}
を追加してみてください。

解決できないようでしたら、問題が再現できる最小限のソースの提示をいただけますか？

回答No.1

ORUKA1951

HTMLのソースを適当に隠して示してください。
<a href="">には関係ないはずです。

<ol>
　　<li><a href=""><img src="" width="" height="" alt=""></a></li>
　　<li><a href=""><img src="" width="" height="" alt=""></a></li>
　　<li><a href=""><img src="" width="" height="" alt=""></a></li>
</ol>
　において、ol li{display:inline-block;}にすると空白があきます。これは、HTMLの仕様
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
特にユーザエージェントは、語間スペースの出力処理に際しては、連続する空白類の入力があった場合は1つにまとめてしまう必要がある。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Paragraphs, Lines, and Phrases (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/text.html#h-9.1 )］より
に起因することが多いからです。