img要素で表示した画像にわずかにできる隙間を消す方法を解説します。 この記事のポイント 画像の下に生じる隙間を解消する 画像の下に生じる隙間を解消する 画像はそのまま表示すると、勝手に余白が生じることがあります。 余白が分かりやすいよう、親要素に背景色でグレーを敷いています。 この余白を消すには、vertical-alignプロパティを指定します。 コード例 <style> figure { display: inline-block; width: 300px; background-color: #999; } figure img { max-width: 100%; vertical-align: bottom; } </style> <figure><img src="./images/banner.png" alt="基礎から応用まで!HTML&CSS"></figure>
![画像を設置した時にできる隙間を無くす | GRAYCODE HTML&CSS](https://cdn-ak-scissors.b.st-hatena.com/image/square/dfde684d94f9aa320edf2bc299f56f34654849fb/height=288;version=1;width=512/https%3A%2F%2Fgray-code.com%2Fwp-content%2Fthemes%2Fgraycode%2Fassets%2Fimages%2Fsns%2Fhtml.png)