カテゴリー:
CSS
閲覧数:449 配信日:2018-02-05 10:50
margin相殺
対象
・ブロック要素の top と bottom マージン
発生要件
・2つのブロックレベル要素が並んだ時
内容
・2つのマージンのうち大きい方（等しい場合は何れか）が1つのマージンとしてみなされる
・結合されるマージンの内、大きな方のサイズを持った1つのマージンになる
・小さな方のマージンは結合される（折り畳まれる (collapsed)）
例外
・絶対配置（position:absolute;）されたボックスのマージンは相殺されない
・その他多数あり
ポイント
全要素
・水平方向では、margin相殺発生しない
「position:absolute;」「position:fixed;」以外の要素
・垂直方向でのみmargin相殺発生
「position:absolute;」「position:fixed;」要素
・垂直方向でもmargin相殺発生しない
margin相殺発生するのは？
「position未指定;」「position:static;」「position:relative;」要素の垂直方向
※例外あり
その他遭遇例
「position:fixed;」要素
・「top」「left」未指定の場合は、垂直方向でmargin相殺発生する