tableにおけるmarginの相殺

このエントリーをはてなブックマークに追加

ネタ元: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の相殺も反映されません。

関連エントリー

marginの相殺
CSSのレイアウトテクニック - Faux Absolute Positioning
CSS で簡単にメニューの上下中央揃えを実現する
javascriptなしで背景が透けるカラムを実装するスタイルシート
CSSでロールオーバーもどき

スポンサードリンク

«[Re:Creator's Kansai]第6回 Effectの制御 - jQueryによるJavaScript入門 | メイン | CSS Nite in Osaka, Vol.11»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1028
コメント

http://j.mp/hRHUOT でtable要素の上下マージンが相殺されるかどうかを実験したら、結果は

IE 8:される
Fx 3.6:されない
Opera 11:される
Chrome:される
Safari 5:される

でした。
Fx 3.6のみ、「垂直方向の2つの要素にtable要素(display:table)が含まれる場合、marginの相殺は行われない」ようです。
仕様書に沿った実装をしているのは、Fx 3.6とそれ以外のどちらでしょうか。

投稿者:シマダ | 2011年1月27日 14:16

>シマダさん

仕様書ではtableに関する特別な記述がないので、Firefoxがちがうのじゃないかと思います。エントリーがFirefox正しい感じなので修正しますね。

ご指摘ありがとうございます!

投稿者:西畑一馬 | 2011年1月27日 20:05

素のtable要素では確かにmarginの相殺を回避できたのですが、div要素でdisplay:tableを指定してみても相殺を回避できませんでした。。

なにか他に条件があるのでしょうか??

投稿者:ごんべぇ | 2015年6月25日 19:18
コメントを投稿