大きい画像を分割して表示させるということがありますが、その時に1つ1つの画像に隙間ができてしまうことがあったりします。
paddingやmarginといった余白は詰めてるのになんでだろう~と思うことが多々あるので備忘録としてメモ。
HTML
<ul class="image_flow">
<li><img src="1枚めの画像のURL"></li>
<li><img src="2枚めの画像のURL"></li>
<li><img src="3枚めの画像のURL"></li>
</ul>
CSS
ul.image_flow {
list-style-type: none; /* リストマークを消す */
}
ul.image_flow li img {
vertical-align: top;
}
のように画像(IMGタグ)に対してvertical-alignプロパティのtopもしくはbottomとしてあげると隙間を詰めてきれいに並べることができます。
