ブックマーク / creator.aainc.co.jp (1)

  • margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話

    CSSで指定するwidth/heightは、特別な指定(後述)が無い限り赤の内容領域の大きさを指定することになります。 また青のboaderまでを含み要素とみなされるので、背景色を指定した場合はboader/padding/content areaの3つに色がつきます。 margin/border/paddingはそれぞれtop/right/bottom/leftの属性を持っているので、個々に指定することもまとめて指定することもできます。 このように要素が展開する領域の考え方をボックスモデルと呼びます。 marginとpaddingを使い分ける 同じように見える余白にも、明確に違いがあることがボックスモデルからわかるかと思います。 余白の表現に迷った時には、私は下のような基準で考えてmarginとpaddingを使い分けています。 boaderの内側の余白はpadding 背景色を含んでい

    margin?padding?ボックスモデルを理解しよう!あとbox-sizingが便利だよ、って話
  • 1