ボックスモデル

ボックスを構成する4つの要素

  1. content
  2. padding
  3. border
  4. margin

ボックス幅=コンテント領域幅+パティング+ボーダーの太さ+マージン

f:id:fujiwarashinichi:20140301162945g:plain

ボックスモデル図

 

padding:パディング

  • ボーダー辺に対してコンテントの読みやすさを確保するために空ける領域。
  • 記述はpadding-top、padding-right、padding-bottom、padding-left、の時計周りの順で値を指定する。
  • まとめて記述する場合はショートハンドプロパティ「padding」を使う。

 

f:id:fujiwarashinichi:20140301163024g:plain

 

 

margin:マージン

  • 関連する機能を視覚的にグループ化し、他の機能ブロックとの空間を広げる。
  • 記述はmargin-top、margin-right、margin-bottom、margin-left、の時計周りの順で値を指定する。
  • まとめて記述する場合はショートハンドプロパティ「margin」を使う。

 

f:id:fujiwarashinichi:20140301163039g:plain

 

 

border:ボーダー

  • ショートハンドプロパティ「border」か、「border-top」など個別に指定する。
  • width、color、styleの3属性が必須
  • 「幅・色・スタイル」は順不同。

 

f:id:fujiwarashinichi:20140219202941j:plain

 

 

>>ボックスモデルのデモへリンク

f:id:fujiwarashinichi:20140301163053j:plain