大きい画像を分割して表示させるということがありますが、その時に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としてあげると隙間を詰めてきれいに並べることができます。