１．ボックスモデルとは
Chromeデベロッパーツールに表示されている下記のような画像について説明します。
HTMLの要素(タグ)はどの要素もボックスと呼ばれる四角形の領域を生成します。
content（コンテンツ）
テキストや画像など、要素そのものの内容が表示される領域です。この領域のサイズは width（幅） と height（高さ）プロパティで指定することができます。
padding（パディング）
content と border の間にある余白の領域です。要素の内側の余白を取るために使います。この領域のサイズは padding プロパティで指定することができます。
border（ボーダー）
padding の外側にある領域、いわゆる枠線です。この領域のサイズは border-width プロパティで指定することができます。
margin（マージン）
ボックスの一番外側の余白の領域です。この領域のサイズは margin プロパティで指定することができます。
２．ブロックボックスとインラインボックス
-
ボックスはブロックボックスとインラインボックスの2種類に分けられます。 - CSSのdisplayプロパティの値によってボックスの種類が決まります。
2.1 ブロックボックスの特徴
- 要素の幅に関係なく、上から下へ縦方向に配置される。（ブロックボックスの前後には改行が伴って、1つの段落としてレイアウトされる）
- 幅（width）や高さ（height）を指定できる。※幅を指定しなければ親要素の幅全体に広がる。
- 上下左右の margin 、padding を指定できる
- displayプロパティのデフォルトは
blockです。
2.2 ブロックレベル要素のタグ例
<div>、<p>、< ul>、< ol>、<li>、<table>など
2.3 インライン要素の特徴
- 幅・高さを指定できない
- 上下マージンを設定できない
- 左から右へ横方向に配置される（改行されない）
- displayプロパティのデフォルトは
inlineです。
2.4 インライン要素のタグ一例
<a>、<br>、<font>、<img>、<select>、<span>、<textarea>など
確かめてみよう
ブロックボックスは、上から下へ(改行されて)配置され、
インラインボックスは、左から右へ配置されていくのが下記ソースで確認できます。
また、全てのdivタグのdisplayプロパティにinlineを指定し、pタグとの見た目を確認してみてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#div1 {
background-color: greenyellow;
}
#div2 {
background-color: khaki;
}
#div3 {
background-color: lightblue;
}
#span1 {
background-color: lightpink;
}
#span2 {
background-color: lightyellow;
}
#span3 {
background-color: mediumslateblue;
}
</style>
</head>
<body>
<div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
<div id="div2" class="box">ボックスモデル</div>
<div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
<span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
<span id="span2" class="inline">インラインボックス</span>
<span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
</body>
</html>
ここにdivタグにdiplay: inlineを指定している説明があります。
ブロックボックス、インラインボックスそれぞれに
幅（width）や高さ（height）、上下左右の margin 、paddingを指定し表示を確認してみてください。
(上記ソースの各要素にheight,width,pading,marginを指定しました。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 1rem;
padding: 1rem;
border: solid;
border-width: 0.5rem;
border-color: black;
}
.inline {
margin: 1rem;
padding: 1rem;
border: solid;
border-width: 0.5rem;
border-color: black;
}
#div1 {
background-color: greenyellow;
width: 200px;
height: 50px;
}
#div2 {
background-color: khaki;
width: 50px;
height: 200px;
}
#div3 {
background-color: lightblue;
width: 200px;
height: 200px;
}
#span1 {
background-color: lightpink;
width: 200px;
height: 50px;
}
#span2 {
background-color: lightyellow;
width: 50px;
height: 200px;
}
#span3 {
background-color: mediumslateblue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" class="box">----- ↓↓↓↓↓ブロックボックス -----</div>
<div id="div2" class="box">ボックスモデル</div>
<div id="div3" class="box">----- ↑↑↑↑↑ -----</div>
<span id="span1" class="inline">----- ↓↓↓↓↓インラインボックス -----</span>
<span id="span2" class="inline">インラインボックス</span>
<span id="span3" class="inline">----- ↑↑↑↑↑ -----</span>
</body>
</html>
５．paddingとmargin、marginの相殺
5.1 paddingとmargin
下記ソースを元に、paddingとmariginの効いている箇所を確認してください。
また、Chromeデベロッパツールに表示されるボックスモデルの画像も確認しておいてください。
- 指定方法には、padding(marigin)と纏めて書く方法とpadding-top(margin-top)のように個別に指定する方法があります。
- padding(marigin)と纏めて書く方法では、topから時計回りに４つ指定します。
- １つ指定した場合は、top,right,bottom,leftすべてに同じ値が適用されます。
- ２つ指定した場合は、topとbottomに１つ目の値、rightとleftに２つ目の値が適用されます。
- ３つ指定した場合は、XXXXXXXXXX。下のソースで確認してみてください。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#a {
padding: 10px;
margin: 50px;
background-color: chartreuse;
}
#b {
padding: 12px 13px;
margin: 14px 15px;
background-color: coral;
}
#c {
padding: 16px 17px 18px;
margin: 19px 20px 21px;
background-color: darkmagenta;
}
#d {
padding-top: 22px;
padding-right: 23px;
padding-bottom: 24px;
padding-left: 25px;
margin-top: 22px;
margin-right: 23px;
margin-bottom: 24px;
margin-left: 25px;
background-color: hotpink;
}
</style>
</head>
<body>
<div id="a">あいうえお</div>
<div id="b">かきくけこ</div>
<div id="c">さしすせそ</div>
<div id="d">たちつてと</div>
</body>
</html>
5.2 marginの相殺
結論から言うと、重なったmarginは大きい方が採用されます。
上記例だと、id="a"のdivタグはmargin-bottom: 50px、id="b"のdivタグのmargin-top: 14pxとなっており、id="a"とid="b"間のmarginは50pxになります。
７．実際のwidth,height
ここまで確認してきたソース、ボックスモデル画像の内容を確認すると実際の幅と高さには、borderやpaddingの大きさも含まれていることが分かります。
ですので、cssで指定した幅、高さはborderやpaddingの分見た目は大きくなります。
下記ソースで確認してみましょう。
divタグの幅は100pxですが、paddingの指定により100px以上の大きさになっています。
#e {
width: 100px;
padding: 200px;
background-color: skyblue;
}
<div id="e">なにぬねの</div>
box-sizing: border-box
borderもpaddingもwidthに含めるというCSS指定も可能です。
下記ソースで確認してみてください。
width: 200pxとしています。
padding: 20pxは200px内に含められていることが分かります。
chromeデベロッパツールのボックスモデルでも確認してみてください。
#e {
width: 200px;
padding: 20px;
background-color: skyblue;
box-sizing: border-box;
}
<div id="e">なにぬねの</div>