BLOG

Go to top


CSS におけるマージン相殺について

January 23, 2008 7:06 PM

CSS におけるマージン相殺というのは、子要素の上の margin が親要素の上の margin と相殺されてしまうことです。CSS は javascript や Perl などのプログラミング言語と違い、変数に格納されている値を表示させればいつかそのうちデバッグ完了、なんてことにはならないので、いくら要素に border を表示させたところで、動作仕様を理解していなければ多大な時間を費やすことになります。特にこのマージン相殺はバグではなく、標準的な動作仕様であるため、余計な時間を使わないためにも知っておいた方がよいでしょう。

回避策

親要素に border または padding を指定することで回避することができます。

HTML タグ

以下のようなマークアップを行なった場合について考えます。マージン相殺が行なわれる場合とそうでない場合を比較するため、二つのボックスを作成します。

<div id="pageContents">
    <div class="multiText">
        ダミーテキストダミーテキストダミーテキストダミーテキスト        
    </div>
</div>
<div id="pageContents2">
    <div class="multiText">
        ダミーテキストダミーテキストダミーテキストダミーテキスト        
    </div>
</div>

CSS

ID が pageContents のボックスではマージン相殺が行なわれ、pageContents2 についてはマージン相殺を回避することを考えます。

.multiText {
    margin-top: 30px;
    background: #ccc;
}

#pageContents { /* no padding or border */
    margin-top: 20px;
    background: #ddd;
}

#pageContents2 { /* add [padding-top: 1px;] */
    margin-top: 20px;
    background: #ddd;
    padding-top: 1px;
}

ID が pageContents のボックスにおいても pageContents2 のボックスにおいても margin-top; 20px を指定しています。この二つのボックスは class 名が multiText のボックスを内包していますが、このボックスには margin-top: 30px を指定しているので、背景色の #ccc が見えていればマージン相殺を回避できた、ということになります。マージン相殺を回避するために、pageContents2 には padding-top: 1px; を指定しました。

結果

ブラウザにより差異がありますが、少なくとも FireFox では確認できると思います。

ダミーテキストダミーテキストダミーテキストダミーテキスト
ダミーテキストダミーテキストダミーテキストダミーテキスト

簡単な解説

CSS におけるマージン相殺というのは、要約すると親要素に border や padding の指定がない場合、子要素の上の margin が親要素の上の margin と相殺されてしまうこと、と言うことができます。逆に言えば、親要素に border や padding を指定することで回避可能ですが、無駄を省いた CSS を目指していれば自然とこの問題に遭遇することと思います。border は見栄えを変えてしまうので、padding に 1px 程度を指定することで回避することが現状では最善と言えるでしょう。また、上記の結果からマージン相殺が行なわれた場合に、子要素に指定した方の margin が意味をなしていないことも把握しておきましょう。

サンプルのダウンロード

以下のリンクからサンプルをダウンロードできます。各ファイルの格納についてはおれ基準になっていますがご了承ください。

サンプルのダウンロードはこちら

Comments


Contact me

Copyright © 2005 - 2017 okayama All rights reserved.