Shopify

CSSで画像の謎の余白を消す方法

CSSを使用している際、画像(img)に予期せず余白が現れることがあります。この余白は、paddingmarginを0に設定しても消えないことがあります。原因は、imgタグがデフォルトでインライン要素として扱われ、vertical-align: baseline;が指定されているためです。

この問題を解決する方法は以下の2つです。

1:imgタグをブロック要素に変更

img {
  display: block;
}

この方法を使用する際は、他の要素への影響を考慮する必要があります。

2:デフォルトの位置を下に揃える

img {
  vertical-align: bottom;
}

この方法は影響が少なく、推奨されています。以上の方法を試すことで、画像の余白問題を解決できます。

ABOUT ME
さすー
2020年からShopifyに注力し、越境ECサイト構築をメインとして従事。海外のWebマーケティング企業に対してECサイト制作の支援を行い、制作部門の立ち上げにも関与。また書籍「はじめての越境EC・海外Webマーケティング」の執筆に協力。最近ではChatGPTなどの生成AIを活用したITソリューションにも取り組み、企業への導入実績もある。