frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

margin-top派 or margin-bottom派

スポンサードリンク


スポンサードリンク


marginのつけ方に迷う

ずっとmargin-bottom派だったんですけど、marginの相殺が思うようにされないケースが出てくるため

マージンが相殺されないケースについて | WEBデザインの教科書

margin-top派になって、自分なりのルールを決めてみようと思ったわけです。

margin-top派ルール

ボックス系...ボックス、テーブル、ボタン(line-heightに関係しない要素)とする

  • ボックス系、見出しは上下にmargin
  • ボックス系に入りうる要素(p要素、li要素など)にmargin-top
  • ボックス系にボックスが入る場合margin-topのみ
  • ボックス系の最初の要素、または2カラムだったら2カラムともmargin-top:0

margin-bottom派で行くなら

margin-bottomでサイトを作らなければいけない状況もあるかと思いますので、そちらもルールとしてカラムレイアウトの例を挙げます。

  • カラムレイアウトの親divにmargin-bottom: 25px; ※1
  • .colの中の最初の要素はmargin-top:0 ※2
  • .colにmargin-bottom ※3
  • マージンボトムの合算をなくすため、最後のcolから最後から数えてカラム数番目(2カラムなら最後から数えて2カラム目までmargin-bottom:0) ※4
  • 同じ理由で入れ子の最後の要素もmargin-bottom: 0; ※5

.lay-col2-01 {
    @include clearfix;
    width: 100%;
    margin-bottom: 25px; ※1
    .col {
        > *:first-child {
            margin-top: 0; ※2
        }
        margin-bottom: 20px; ※3
        &:last-child, &:nth-last-child(2) {
            margin-bottom: 0; ※4
            >*:last-child{
                margin-bottom: 0; ※5
            }
        }
        p + .hdg-l2-01 {
            margin-top: 40px;
        }
        width: calc(50% - 10px);
        float: left;
        &:nth-child(odd){
            margin-right: 20px;
        }
        @include breakpoint(sp){
            width: 100%;
            float: none;
        }
    }
}