こんにちは、ゆんつです。
この前HTMLとCSSを書いていて、こんなケースに遭遇しました。
ここに2枚画像があります。
この2枚の画像を隙間なくピッタリと横並びにしたいのです。
普通にこんな感じのコードを書きました。
<div>
<img src="sironeko1.JPG">
<img src="sironeko1.JPG">
</div>
すると結果はこう。
画像と画像の間に必要のない余計な空白が空きます。
空白なく画像をピッタリくっつけたい！！
検索したり色々と試行錯誤して画像と画像がピタッとくっつく方法を見つけたので書き残しておきます。
インライン要素では改行を半角スペースとみなす。
img要素はインライン要素です。
インライン要素においては、HTMLのソース上での改行を半角スペースとみなします。
ですので僕が書いた１つめのimg要素と2つ目のimg要素にある改行は半角スペース扱いになるのです。
するとそれがレイアウトに反映し、画像と画像の間に不要なスペースが空くのですね。
解決方法
1. 改行しない
余分なスペースを開けたくなければ改行しなければいいのです。
つまり
<div>
<img src="sironeko1.JPG"><img src="sironeko1.JPG">
</div>
ですね
これにより画像は間隔なくピタっとくっつきます。
2. font-size: 0を指定する
1.の解決法のように、改行せずにソースコードを書くと見づらいです。
HTMLは改行したいが、スペースは無くしたい。
そのような場合はCSSで親要素に「font-size: 0」を指定してあげればいいです。
つまりHTMLは普通に改行して
<div>
<img src="sironeko1.JPG">
<img src="sironeko1.JPG">
</div>
CSSで親要素のdivに対しfont-size:0を指定
div {
font-size: 0;
}
これでも、画像は横並びにぴったりくっつきます。
縦は大丈夫みたい
試しにimg要素をブロックレベルにして、縦に並べてみます。
するとソースに改行があっても、隙間なくピッタリと画像がくっつきます。
ですので、改行を気にするのは横並びにしたい時だけで良いみたいです。
まとめ
画像をピッタリ隙間なく並べたいときは
・CSSで親要素に対しfont-size:0を指定
のどちらかを使えばいいということが分かりました。
そしてこれは横方向の並びだけの問題で、縦方向の並びに関しては気にする必要が無いということも分かりました。
以上です
それでは、またー。
コメント