画像を設置した時にできる隙間を無くす HTML d

CSS コード例figure { display: inline-block; width: 300px; background-color: #999;}figure img { max-width: 100%; vertical-align: bottom; }HTML コード例figureimg src="./images/banner.png" alt="基礎から応用まで！HTMLgt;/figure 今回は値に「bottom」を指定していますが、「top」や「middle」でも大丈夫です， これらのカテゴリーのうち、フローコンテンツ（インライン要素）は記述したソースに改行がある場合、ブラウザで表示するとソースの改行がそのまま表示されてしまうため隙間ができてしまいます，。

HTML4以前ではブロックレベル要素、インライン要素に分かれていました， CSS コード例img { float: left; display: block; }HTML コード例bodyimg src="images/pic.jpg" alt="サンプル画像 その1"img src="images/pic.jpg" alt="サンプル画像 その2"img src="images/pic.jpg" alt="サンプル画像 その3"/body img要素に「display: block;」を適用し、さらにfloatプロパティで横並びにしています， 今でもCSSでは「display: block;」や「display: inline;」のように記述することがあると思います。

HTML コード例bodyimg src="images/pic.jpg" alt="サンプル画像 その1"img src="images/pic.jpg" alt="サンプル画像 その2"img src="images/pic.jpg" alt="サンプル画像 その3"/body こちらのHTMLをそのまま表示すると、次のように画像と画像の間に隙間ができます， 余白が分かりやすいよう、親要素に背景色でグレーを敷いています， 以下のサンプルコードは必要最低限の記述となるようhtml要素やtitle要素は省略しています， HTML コード例bodyimg src="images/pic.jpg" alt="サンプル画像 その1"img src="images/pic.jpg" alt="サンプル画像 その2"img src="images/pic.jpg" alt="サンプル画像 その3"/body 改行を削除しただけですが、こちらのHTMLをブラウザに表示すると隙間は消えます， この余白を消すには、vertical-alignプロパティを指定します。

ブラウザの表示は1つ目の方法と全く同じですが、2つ目の方法はHTMLコードが見やすいため、後々のメンテナンスなどにも影響を与えないため、どちらかというと2つ目の方法がオススメです， ， 例えば、次のようなHTMLのソースを記述したとします， この現象を回避するには、次の2通りの方法があります， 画像の下に生じる隙間を解消する 画像はそのまま表示すると、勝手に余白が生じることがあります， 非常に簡単な解決方法ではありますが、改行がなくなることでimg要素が連続していてやや見づらいソースになってしまう点がデメリットです， display:block;を使う 2つ目の方法はHTMLは変更せず、CSSで解決します， もし今回のvertical-alignプロパティを使っても隙間が消えない場合は要素サイズが余分に大きい可能性があるため、line-heightプロパティを併せて指定してみてください， ソースの改行を削除する 1つ目の方法はCSSなどは使用せず、HTMLコードにある改行を直接削除することで隙間を非表示にします， CSS コード例figure img { max-width: 100%;vertical-align: bottom; line-height: 1.0em; }改行による隙間を解消する HTMLのimg要素やp要素にはフローコンテンツ、記述コンテンツ、セクショニングコンテンツなど、それぞれの要素が属する「カテゴリー」があります， 先述のコードであれば、次のようになります。