こんにちは！
UPSTARTSのSベンです！
今回は「ボックスモデル」についての内容です。
こちらのhtmlにスタイルをあてていきます。
|
1 2 3 |
<body> <div>麦わらの一味黒ひげ海賊団白ひげ海賊団赤髪海賊団ロジャー海賊団ドンキホーテファミリー百獣海賊団ビッグ・マム海賊団ハートの海賊団キッド海賊団</div> </body> |
ボックスモデル
まずはこちらの図をご覧ください。
横幅 → width
高さ → height
内側の余白 → padding
外側の余白 → margin
枠線 → border
上記がボックスモデルで指定できるプロパティになります。
ではこれらを実際に使ってみていきたいと思います。
width, height
まずはwidthとheightから見ていきましょう。
div要素にwidthとheightを設定してみます。
わかりやすいように背景色も指定します。
|
1 2 3 4 5 |
div { background: orange; width: 300px; height: 200px; } |
このようにすると、
背景がオレンジで横幅300px、高さ200pxのボックスができます。
padding
次にpaddingを使ってみましょう。
paddingの指定方法はこのように、
padding-top
padding-bottom
padding-right
padding-left
各部分を一個ずつ指定する書き方と、
padding
で一気に指定する方法があります。
こちらは与える値の数により意味が変わってきます。
1つの値だと、4辺全ての指定
2つの値だと、top/bottomとright/leftの指定
3つの値だと、topとright/leftとbottomの指定
4つの値だと、時計回りにtop, right, bottom, leftの指定
ソースは以下になります。
|
1 2 3 4 |
div { background: orange; padding: 10px; } |
今回は値が1つなので、4辺全ての内側の余白を10pxあける事ができます。
margin
次にmarginを使っていきましょう。
marginもpaddingと指定方法は同じになります。
|
1 2 3 4 5 |
div { background: orange; padding: 10px; margin: 15px; } |
こちらも値が1つなので、4辺全ての外側の余白を15pxあける事ができます。
今回はボックスモデルの内容についてやっていきました。
次回はボックス関連のborderについてです。
ではまた次回！
