tableにおけるmarginの相殺

Firefoxのtableにおけるmargin相殺はちょっとややこしいので補足しておきます。

基本的に垂直方向の2つの要素にtable要素(display:table)が含まれる場合、marginの相殺は行われないです。

p{
	margin-bottom:20px;
}
table{
	margin-top:20px;
}

table要素にcaption要素が含まれる場合、table要素のmargin-topとcaption要素のmargin-bottomでmarginの相殺が行われます。

p{
	margin-bottom:20px;
}
caption{
	margin-bottom:20px;
}
table{
	margin-top:20px;
}

Firefox以外のブラウザでは通常のブロックレベル要素と同じようにmarginの相殺が行われます。

また、caption要素に対してmarginの指定ができないのでcaptionに関するmarginの相殺も反映されません。

to-Rについて: JavaScriptやCSS、React/Angularなどのフロントエンド情報を発信しています。
書いてる人: 西畑一馬 (株式会社トゥーアール)
代表取締役/フロントエンドエンジニア
株式会社トゥーアールについて: 渋谷にあるフロントエンドに特化したWeb制作会社です。フロントエンドの実装についてお困りの事がありましたらお気軽にご相談ください。
株式会社トゥーアールへのお問い合わせ

最近のエントリー