ボックスモデル
cssには、ボックスモデルという概念があります。
例えば、
こんな画面があるとします。
HTMLはこちらです。
<body>
<div class="box">
BOX
</div>
</body>
CSSはこちらです。
.box {
background-color: paleturquoise;
width: 230px;
font-size: 100px;
}
border: 10px solid black;
この1行をCSSに追加すると、
こうなります(ボーダーが追加されました)。
padding: 100px;
さらに、この1行を追加すると、
こうなります(内枠が広がりました)。
margin: 200px;
さらに、この1行を追加すると、
こうなります(外枠が広がりました)。
このように、CSSには枠、内枠、外枠といった概念があります。
これを、ボックスモデルと呼びます。
背景色は、
こちらのサイトを参考にしました。
以上。
