Summary  
The CSS box-sizing property controls how an element’s specified width and height are calculated—either including padding and borders (border-box), excluding them (content-box), or inheriting the behavior from its parent (inherit).

General domain of usage  
Web page layout and responsive design

Watch this video to see how the box-sizing property affects element sizing in CSS. You will learn the visual differences between content-box and border-box, and how these settings impact layout and spacing. This will help you understand how to control the width and height of elements more predictably in your web designs. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

`box-sizing` プロパティは、要素の合計サイズ（特に `width` と `height`）の計算方法を制御するために使用されます。`box-sizing` プロパティには、3つの値を指定できます。それぞれの値の意味は以下の通りです。
```css
box-sizing: content-box | border-box | inherit;
```

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJ3cmFwcGVyIj4KICAgICAgPGRpdiBjbGFzcz0iY2FyZCBjb250ZW50LWJveCI+CiAgICAgICAgPGgzPmNvbnRlbnQtYm94PC9oMz4KICAgICAgICA8cD4KICAgICAgICAgIFRoZSBwYWRkaW5nIGFuZCBib3JkZXIgYXJlIGFkZGVkIG9uIHRvcCBvZiB0aGUgd2lkdGggYW5kIGhlaWdodC4gU28KICAgICAgICAgIHRoZSB0b3RhbCBzaXplIGJlY29tZXMgbGFyZ2VyIHRoYW4gMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KCiAgICAgIDxkaXYgY2xhc3M9ImNhcmQgYm9yZGVyLWJveCI+CiAgICAgICAgPGgzPmJvcmRlci1ib3g8L2gzPgogICAgICAgIDxwPgogICAgICAgICAgVGhlIHBhZGRpbmcgYW5kIGJvcmRlciBhcmUgaW5jbHVkZWQgaW4gdGhlIDIwMHB4IHdpZHRoIGFuZCBoZWlnaHQuIFRoZQogICAgICAgICAgYm94IHN0YXlzIGV4YWN0bHkgMjAwcHguCiAgICAgICAgPC9wPgogICAgICA8L2Rpdj4KICAgIDwvZGl2PgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwovKiBEZWZhdWx0IGJlaGF2aW9yICovCi5jb250ZW50LWJveCB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UxZjVmZTsKfQoKLyogUmVjb21tZW5kZWQgbW9kZXJuIGJlaGF2aW9yICovCi5ib3JkZXItYm94IHsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGJhY2tncm91bmQtY29sb3I6ICNmZmYzZTA7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwoud3JhcHBlciB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBnYXA6IDQwcHg7CiAgcGFkZGluZzogMTBweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjRmNGY4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7Cn0KCi5jYXJkIHsKICB3aWR0aDogMjAwcHg7CiAgaGVpZ2h0OiAyMDBweDsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlcjogNHB4IHNvbGlkICM0YTkwZTI7CiAgYm9yZGVyLXJhZGl1czogMTJweDsKICBmb250LWZhbWlseTogJ0ZpcmEgU2FucycsIHNhbnMtc2VyaWY7CiAgYm94LXNoYWRvdzogMCA0cHggMTJweCByZ2JhKDAsIDAsIDAsIDAuMSk7CiAgZm9udC1zaXplOiAxNXB4OwogIGxpbmUtaGVpZ2h0OiAxLjU7CiAgdHJhbnNpdGlvbjogYWxsIDAuM3MgZWFzZTsKfQoKaDMgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tdG9wOiAwOwogIGZvbnQtc2l6ZTogMjBweDsKICBmb250LXdlaWdodDogNjAwOwogIGNvbG9yOiAjMzMzOwp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      /* Default behavior */
      .content-box {
        box-sizing: content-box;
        background-color: #e1f5fe;
      }

      /* Recommended modern behavior */
      .border-box {
        box-sizing: border-box;
        background-color: #fff3e0;
      }

      /* Additional styles for better appearance (not the current focus) */
      .wrapper {
        display: flex;
        justify-content: center;
        gap: 24px;
        padding: 10px;
        background-color: #f4f4f8;
        box-sizing: border-box;
      }

      .card {
        width: 200px;
        height: 200px;
        padding: 20px;
        border: 4px solid #4a90e2;
        border-radius: 12px;
        font-family: 'Fira Sans', sans-serif;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        font-size: 15px;
        line-height: 1.5;
        transition: all 0.3s ease;
      }

      h3 {
  text-align: center;
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="card content-box">
        <h3>content-box</h3>
        <p>
          パディングとボーダーは幅と高さに追加されます。そのため、
          全体のサイズは200pxより大きくなります。
        </p>
      </div>

      <div class="card border-box">
        <h3>border-box</h3>
        <p>
          パディングとボーダーは200pxの幅と高さに含まれます。
          ボックスのサイズは正確に200pxのままです。
        </p>
      </div>
    </div>
  </body>
</html>


## inherit
`inherit` 値は、要素の `box-sizing` プロパティが親要素からその値を継承できるようにする設定。これにより、現在の要素の `box-sizing` の挙動は親要素の `box-sizing` プロパティによって決定される。

`box-sizing` プロパティのデフォルト値は何ですか？

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

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

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

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

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

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

ボックスサイズと幅の制御

出力

inherit