<img>タグにできるmarginでもpaddingでもない謎の余白

はじめに

ナビゲーションバーの作成中、<img>タグの下に現れるmarginでもpaddingでもない謎の余白に苛まされました。

今回はこの解決方法について紹介したいと思います。

解決方法

1. img要素にdisplay: block;
2. img要素にvertical-align: middle;
3. 親要素にline-height: 0;
4. 親要素にfont-size: 0;

原因

原因は、インライン要素の特性にありました。インライン要素はテキストのフォントサイズや行の高さに影響を受けます。<img>タグはインライン要素であり、予期しない余白が生じることがあります。<img>タグを使用する際は、このような影響を考慮する必要があります。

コード例

JSX

import styles from './header.module.scss'
import logo from '../../assets/images/logo.svg'
import search from '../../assets/images/search.svg'
import cart from '../../assets/images/cart.svg'

function Header() {
	return (
		<header className={styles.header}>
			<button className={styles.header__hamburger}>
				<span></span>
			</button>
			<a href='#' className={styles.header__logo}>
				<img src={logo} alt='ロゴ' />
			</a>
			<div>
				<button className={styles.header__search}>
					<img src={search} alt='検索' />
				</button>
				<a href='#' className={styles.header__cart}>
					<img src={cart} alt='買い物カゴ' />
				</a>
			</div>
		</header>
	)
}

export default Header

SCSS

.header {
	display: flex;
	justify-content: space-between;
	box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);

	& button {
		background-color: white;
		border: none;
		height: 48px;
		padding-left: 16px;
		padding-right: 16px;
	}

	&__hamburger {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 64px;
		outline: 0;
		cursor: pointer;

		& > span {
			display: block;
			width: 20px;
			border-top: 2px solid #2d2d2d;
			margin-bottom: 5px;
		}

		&::before {
			content: '';
			width: 20px;
			border-top: 2px solid #2d2d2d;
			margin-bottom: 5px;
		}

		&::after {
			content: '';
			width: 20px;
			border-top: 2px solid #2d2d2d;
		}
	}

	&__logo {
		& img {
			display: block; // 謎の余白を消す
			height: 48px;
			width: 54px;
		}
	}

	&__cart {
		margin-right: 16px;
	}
}