CSS #09 ボックスモデル

  • このエントリーをはてなブックマークに追加
  • LINEで送る

 

こんにちは!
UPSTARTSのSベンです!

 

今回は「ボックスモデル」についての内容です。

こちらのhtmlにスタイルをあてていきます。

 

 

ボックスモデル

まずはこちらの図をご覧ください。

横幅    → width
高さ    → height
内側の余白 → padding
外側の余白 → margin
枠線    → border

上記がボックスモデルで指定できるプロパティになります。

 

ではこれらを実際に使ってみていきたいと思います。

 

 

width, height

まずはwidthとheightから見ていきましょう。

 

div要素にwidthとheightを設定してみます。

わかりやすいように背景色も指定します。

 

このようにすると、

背景がオレンジで横幅300px、高さ200pxのボックスができます。

 

 

padding

次にpaddingを使ってみましょう。

 

paddingの指定方法はこのように、

padding-top
padding-bottom
padding-right
padding-left

各部分を一個ずつ指定する書き方と、

 

padding

で一気に指定する方法があります。

こちらは与える値の数により意味が変わってきます。

 

1つの値だと、4辺全ての指定
2つの値だと、top/bottomright/leftの指定
3つの値だと、topright/leftbottomの指定
4つの値だと、時計回りにtop, right, bottom, leftの指定

 

ソースは以下になります。

 

今回は値が1つなので、4辺全ての内側の余白を10pxあける事ができます。

 

 

margin

次にmarginを使っていきましょう。

 

marginもpaddingと指定方法は同じになります。

 

こちらも値が1つなので、4辺全ての外側の余白を15pxあける事ができます。

 

 

 

 

 

 

今回はボックスモデルの内容についてやっていきました。

次回はボックス関連のborderについてです。

 

ではまた次回!


  • このエントリーをはてなブックマークに追加
  • LINEで送る