ボックスモデル ― 余白と枠線

導入

すべての要素は、四角い「箱」として配置されます。箱には 内側の余白・枠線・外側の余白 があり、これらを合わせて ボックスモデル と呼びます。

説明

• padding … 枠線の 内側 の余白（中身と枠のあいだ）
• border … 枠線（太さ・種類・色をまとめて指定）
• margin … 枠線の 外側 の余白（隣の要素とのあいだ）

<p class="card">箱のモデル</p>

<style>
  .card {
    padding: 16px;
    border: 2px solid gray;
    margin: 20px;
  }
</style>

border: 2px solid gray は「2ピクセルの・実線の・灰色の枠」という意味です。padding は中の詰め物、margin は箱の外の余白、と覚えましょう。

やってみよう

上の例を打ち込み、文字のまわりに余白と枠が付くことを確かめましょう。padding と margin の数字を変えて、内と外の余白の違いを見比べてください。

演習

class="card" の要素に padding を 10px 指定する CSS を書いてください。