白米と塩とインターネット:画像の下の隙間をなくす画像を縦に並べたような場合に画像の下に隙間が空いてしまうことがある。 marginもpaddingも0にしていても。 【解決策】 img{ vertical-align:bottom; } 【解説】 vertical-alignの値はデフォルトだとbaselineとなって"g"や"j"のような文字が下にはみ出す分のスペースを確保しているためらしい。 なのでbottomにして一番下のラインに画像を合わせてあげる。 【解決策２】 font-size:0; line-height:0; 【解説】 テキストが無い場合はこれを画像のある親要素に指定。 画像の高さよりもフォントサイズのほうが大きいのが隙間の原因なのでそれを阻止。 ケースバイケースなので使い分ける感じで。
