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

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

何の気なしに、当サイト記事一覧のカードデザインに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で上下が効かない、ということはありませんでした。


タグ :