楽しいだけで十分です

ボックスモデル, padding, marginの整理

今日は、CODEPREP | CSS基礎 margin padding編を勉強したのでメモです。


ボックスモデル

ボックスモデルの計算ルールを変更する

  • box-sizing: 値;で指定する
  • widthとheightで指定した領域がどこまでを含むかが変更できる
  • デフォルト値はcontent-boxで、content areaしか含まない
  • border-boxにすると、borderまでを含むようになる (なので、content-boxの時よりも小さくなる)
  • box-sizing - CSS: カスケーディングスタイルシート | MDN

marginを指定して要素をセンタリングする

  • autoは、それが設定された要素の間隔を適切な値に置き換える

marginの相殺を抑制する

  • 隣り合う要素の間にborderがある場合 (borderが上下の要素の境界となるため相殺が発生しなくなる)
  • padding, height, min-heightが設定されている場合
  • インラインコンテンツ(ただのテキストなど)がある場合

ネガティブmarginを指定する

  • 指定された要素は、値が指定された方向に移動する
  • widthを設定していない要素の左右にネガティブマージを指定した場合、その要素は左右に広がる

    • widthが指定されている場合は、左寄せになる
yinm

WRITTEN BY yinm

I'm a software engineer.