Summary  
This chapter covers the CSS box model’s spacing properties—padding, margin, and border—including their shorthand syntax and individual side settings.

General domain of usage  
Web page layout design

すべての要素にはコンテンツ、パディング、ボーダー、マージンがあることはご存知でしょう。これらのプロパティを使ってスペースをどのように制御するかを見ていきます。

## パディング
パディングは、要素の**内側**、コンテンツとボーダーの間にスペースを作ります。
```css
.box {
  padding: 20px;
}
```
これにより、四辺すべてに20pxのパディングが適用されます。

### パディングのショートハンド
パディングはショートハンド構文で記述できます。

値の順序は常に「上 → 右 → 下 → 左」です。

```css
padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### 個別のパディングプロパティ

各辺を個別に制御することも可能：
```css
padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;
```

## マージン
マージンは要素の**外側**にスペースを作り、他の要素との間隔を確保。
```css
.box {
  margin: 20px;
}
```



### マージンのショートハンド
マージンはパディングと同じショートハンドルールに従う：

```css
margin: 20px; /* all sides */
margin: 10px 20px; /* top/bottom | left/right */
margin: 10px 20px 5px; /* top | left/right | bottom */
margin: 10px 15px 20px 25px; /* top | right | bottom | left */
```

### 個別のマージンプロパティ
個別に設定することも可能：
```css
margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;
```


## ボーダー
ボーダーは**パディングとマージンの間**に位置。

基本的なショートハンド：
```css
border: 4px solid brown;
```
この指定で幅、スタイル、色を定義。

一般的なボーダースタイルには、`solid`、`dotted`、`dashed`、`double` があります。

必要に応じて各辺を個別に指定することもできます：
```css
border-top: 2px solid black;
```

次の例を見て、考えられるボーダースタイルを確認しましょう：



PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXItc2hvd2Nhc2UiPgogICAgICA8ZGl2IGNsYXNzPSJjYXJkIGJveC1vbmUiPgogICAgICAgIDxoMz5Tb2xpZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPkEgY2xhc3NpYywgY2xlYW4gc29saWQgbGluZSB1c2VkIGluIG1vc3QgVUkgZWxlbWVudHMuPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm94LXR3byI+CiAgICAgICAgPGgzPkRvdHRlZCBCb3JkZXI8L2gzPgogICAgICAgIDxwPlVzZWQgZm9yIG91dGxpbmVzLCBub3Rlcywgb3IgZGVjb3JhdGl2ZSBlbGVtZW50cy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtdGhyZWUiPgogICAgICAgIDxoMz5EYXNoZWQgQm9yZGVyPC9oMz4KICAgICAgICA8cD5PZnRlbiBzZWVuIGluIGVkaXRhYmxlIGZpZWxkcyBvciAiZHJhZyBoZXJlIiB6b25lcy48L3A+CiAgICAgIDwvZGl2PgoKICAgICAgPGRpdiBjbGFzcz0iY2FyZCBib3gtZm91ciI+CiAgICAgICAgPGgzPkRvdWJsZSBCb3JkZXI8L2gzPgogICAgICAgIDxwPlN0eWxpc2ggYW5kIGJvbGQgLSB1c2VkIGZvciBlbXBoYXNpcyBvciBmcmFtaW5nLjwvcD4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouYm94LW9uZSB7CiAgYm9yZGVyOiAycHggc29saWQgYnJvd247Cn0KCi5ib3gtdHdvIHsKICBib3JkZXI6IDJweCBkb3R0ZWQgYnJvd247Cn0KCi5ib3gtdGhyZWUgewogIGJvcmRlcjogMnB4IGRhc2hlZCBicm93bjsKfQoKLmJveC1mb3VyIHsKICBib3JkZXI6IDRweCBkb3VibGUgYnJvd247Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwouYm9yZGVyLXNob3djYXNlIHsKICBkaXNwbGF5OiBmbGV4OwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDMwcHg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWF4LXdpZHRoOiA5MDBweDsKfQoKLmNhcmQgewogIHdpZHRoOiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMCA0cHggMTBweCByZ2JhKDAsIDAsIDAsIDAuMDgpOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICB0cmFuc2l0aW9uOiB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpoMyB7CiAgbWFyZ2luLXRvcDogMDsKICBmb250LXNpemU6IDE4cHg7CiAgY29sb3I6ICMzMzM7Cn0KCnAgewogIGZvbnQtc2l6ZTogMTRweDsKICBjb2xvcjogIzU1NTsKICBsaW5lLWhlaWdodDogMS41Owp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .box-one {
        border: 2px solid brown;
      }

      .box-two {
        border: 2px dotted brown;
      }

      .box-three {
        border: 2px dashed brown;
      }

      .box-four {
        border: 4px double brown;
      }

      /* Additional styles for better appearance (not the current focus) */
      .border-showcase {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
        max-width: 600px;
margin: auto;
      }

      .card {
        width: 200px;
        padding: 20px;
        border-radius: 12px;
        background-color: white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: transform 0.2s ease;
      }

      h3 {
        margin-top: 0;
        font-size: 18px;
        color: #333;
      }

      p {
        font-size: 14px;
        color: #555;
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <div class="border-showcase">
      <div class="card box-one">
        <h3>実線ボーダー</h3>
        <p>多くのUI要素で使われる、クラシックでシンプルな実線です。</p>
      </div>

      <div class="card box-two">
        <h3>点線ボーダー</h3>
        <p>アウトラインや注釈、装飾的な要素によく使われます。</p>
      </div>

      <div class="card box-three">
        <h3>破線ボーダー</h3>
        <p>編集可能なフィールドや「ここにドラッグ」ゾーンなどでよく見かけます。</p>
      </div>

      <div class="card box-four">
        <h3>二重線ボーダー</h3>
        <p>スタイリッシュで存在感があり、強調や枠取りに使われます。</p>
      </div>
    </div>
  </body>
</html>


パディング：
- 要素内側の余白を追加；
- 背景領域が拡張される。

マージン：
- 要素外側の余白を追加；
- 要素の背景には影響しない。

主な違い

次の宣言で `40px` が適用されるのはどの辺ですか？

要素の内部、コンテンツと境界線の間にスペースを追加するプロパティはどれですか？

ウェブページの外観と雰囲気を変えるスタイリング言語であるCSSの基本を習得します。テキストスタイル、色、間隔、ボックスモデル、Flexbox、装飾効果などのコアコンセプトを探求します。視覚的に魅力的で構造化されたウェブページを作成するスキルを身につけます。

CSSがHTMLにどのように接続され、セレクタを通じてスタイルが適用されるかを理解します。色、テキストのスタイリング、ホバー効果を適用して視覚的なプレゼンテーションを制御します。

行の高さ、間隔、フォントプロパティ、カスタムフォントを使用してタイポグラフィを改善します。フォントファミリー、太さ、スタイル、サイズを制御して可読性を向上させます。

マージン、パディング、ボーダー、幅のプロパティを使用したレイアウト構造の制御。ボックスサイズの挙動およびブロック、インライン、インラインブロックなどの要素表示タイプの理解。

Flexboxプロパティを使用して水平方向および垂直方向のレイアウトを制御します。方向、配置、間隔を調整してUIコンポーネントを構成します。

背景色、画像、疑似要素、シャドウを使用してレイアウトを強化します。視覚コンポーネントに奥行きとコントラストを持たせたスタイル設定。

マージンとパディングの基本

パディング

パディングのショートハンド

個別のパディングプロパティ

マージン

マージンのショートハンド

個別のマージンプロパティ

ボーダー

出力

1. 次の宣言で `40px` が適用されるのはどの辺ですか？

2. 要素の内部、コンテンツと境界線の間にスペースを追加するプロパティはどれですか？