img要素の親に幅をつけても効かない理由はなぜでしょうか

Question

  <div class="a">
      <img src="img/bg-index-01.jpg">
    </div>

.a {
  width: 400px
}

aやspanにはdisplay:blockをつけたら幅がきいたのですが,imgだと何が違うのでしょうか。理由が知りたいです。

Answer 1

img要素の親に幅をつけても効かない

いえ、<div>のwidthはきちんと確保されています。無色透明で見えないだけです。

https://jsfiddle.net/5e20nqus/

Comments

[退会済みユーザー]

img画像自体の幅はなぜ変わらないのですか。

[maisumakun]

aやspanはデフォルトでインライン要素なのに対して、imgはデフォルトでインラインブロック要素です（img要素自身が幅を持ちます）。

[maisumakun]

（補足ですが、「効く」「効かない」のような表現をすると、今回のようにどこを指すか伝わらないことが起こりえます。「imgの幅が変化しない」などのように、どこが思うようにならないか明記したほうがいいです）

[退会済みユーザー]

ありがとうございます。わかりました。具体的に明記します。