HTML & CSS

レシピ

レイアウト

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

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>
下の余白が消える

今回は値に「bottom」を指定していますが、「top」や「middle」でも大丈夫です。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。