Summary  
This chapter explains the CSS `box-sizing` property and its values (`content-box`, `border-box`, `inherit`), showing how they determine whether padding and borders are included in an element’s specified width and height.  

General domain of usage  
Web page layout and styling in front-end development.

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

The `box-sizing` property is used to control how the total size of an element is calculated, specifically concerning its `width` and `height`. There are three possible values for the `box-sizing` property. Let's break down what each of these values means:
```css
box-sizing: content-box | border-box | inherit;
```

Width/height include content + padding + border.

Content area shrinks to fit padding and border.

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>
          The padding and border are added on top of the width and height. So
          the total size becomes larger than 200px.
        </p>
      </div>

      <div class="card border-box">
        <h3>border-box</h3>
        <p>
          The padding and border are included in the 200px width and height. The
          box stays exactly 200px.
        </p>
      </div>
    </div>
  </body>
</html>


## inherit
The `inherit` value allows an element's `box-sizing` property to inherit its value from its parent element. This means that the `box-sizing` behavior of the current element is determined by the `box-sizing` property of its parent element.

What is the default value for the `box-sizing` property?

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Box Sizing and Width Control

Output

inherit

Box Sizing and Width Control

Output

inherit