<img>要素はブロックレベルですか、インラインレベルですか？

その<img>要素が両方のように動作する場所を読んだことがあります。正しい場合、誰かが例を挙げて説明してもらえますか？

それは本当です、それらは両方です-より正確には、それらは「インラインブロック」要素です。つまり、テキストのようにインラインで流れますが、ブロック要素のように幅と高さもあります。

CSSでは、要素をdisplay: inline-blockに設定して、画像の動作を複製することができます*。

画像とオブジェクトは「置き換えられた」要素とも呼ばれます。それら自体にはコンテンツがないため、要素は基本的にバイナリデータに置き換えられます。

*ブラウザは技術的に使用していますがdisplay: inline（開発者ツールで見られるように）、画像を特別に扱います。彼らはまだのすべての特性に従いますinline-block。

img要素がある置き換えインライン要素。

インライン要素のように動作しますが（そうであるため）、インライン要素に関するいくつかの一般化は要素に適用されませんimg。

例えば

一般化：「幅はインライン要素には適用されません」

どのような仕様は、実際に言う：「適用：すべての要素が、非置き換えインライン要素、テーブルの行、行グループを」

画像は置き換えられたインライン要素であるため、適用されます。

IMG要素はインラインです。つまり、フロートしない限り、テキストやその他のインライン要素と共に水平方向に流れます。

それらは幅と高さを持っているという点で「ブロック」要素です。ただし、その点では「インラインブロック」のように動作します。

ほとんどすべての目的で、幅の設定されたインライン要素と考えてください。基本的に、CSSを使用して画像をどのように表示するかを自由に指定できます。通常、次のようにいくつかの画像クラスを設定します。

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

画像を挿入するときはいつでも、画像が元々持っている幅を使用します。その隣に他のHTML要素を追加すると、それが許可されることがわかります。これにより、画像が「インライン」要素になります。

それは本当です、それらは両方です-より正確には、それらは「インラインブロック」要素です。つまり、テキストのようにインラインで流れますが、ブロック要素のように幅と高さもあります。