[CSS]繋がっている画像を並べた時に隙間を無くす方法

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

コメントを残す