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»