Firefoxで何故か上下のmarginが効いていないぞ！
Firefoxで何故か上下のmarginが効いていないぞ！

Firefoxで何故か上下のmarginが効いていないぞ！

2017.06.30 CSS

何の気なしに、当サイト記事一覧のカードデザインにmarginを％指定で設定していると、Firefoxで見た時に、上下のmarginが効いていないことに気づきました。（今頃！！！）

簡単に書くとこんな感じ…

.post-list {
	position: relative;
	margin: 0.5%;
	width: 32%;
	background: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

このように、marginを％で指定していると、下のイラストのようになってしまいました。

Firefox％指定マージンイメージ

これを回避するには、上下のmarginを％指定以外にすること。

.post-list {
	position: relative;
	margin: 0 0.5% 2em;
	width: 32%;
	background: #fff;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
}

%指定以外でしたら、marginで上下が効かない、ということはありませんでした。

タグ ：