divで囲んだimgタグの下にできる余白を消すCSSを使っていると思いますが、 現場ではどのようにしていますか？

Question

divで囲んだimgタグの下にできる余白を消すCSSを使っていると思いますが、
現場ではどのようにしていますか？
下記のようにフルイドイメージにくっつけてすべて消してしまいますか？

それとも個別にインライン要素の画像にのみすべてつけている形でしょうか？

/* Fluid-image */
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}

またこのような現象は、divで囲んだimgタグなどimg画像がインライン要素の場合で、かつ画像を親要素で直前に囲んだ場合のみ起こる現象と考えてよろしいでしょうか？

下記のような場合のみ必要

<div> <p><img src="#" alt="" width="1500" height="1000"></p> </div> <section> <p>ああああああああああ</p> <img src="#" alt="" width="1500" height="1000"> 不要 <img src="#" alt="" width="1500" height="1000"> こちらのみvertical-align: bottom;が必要 </section>

下記は不要

<section> <p>ああああああああああ</p> <img src="#" alt="" width="1500" height="1000"> <img src="#" alt="" width="1500" height="1000"> <p>ああああああああああ</p> </section>

Answer 1

普通に、

img {
  display: block;
}

とかではなくてですかね？

サンプル でやってみましたけれども、言われている内容とは違いますでしょうか？

Comments

[退会済みユーザー]

vertical-align: bottom; でなくblock要素にすることで下の隙間をなくすのが主流なのですね。

[hidekichi]

主流かどうかはわかりませんが、基本imgはインライン要素なのでどうしても隙間ができます。だったらblockにしちゃえば良いじゃないと言う感じです。

[退会済みユーザー]

結果が出ればそれでいいですね。