Summary  
This chapter covers the CSS box-sizing property, explaining how the content-box and border-box values (and the inherit option) change the way an element’s width and height are calculated by including or excluding padding and borders.

General domain of usage  
Web page layout and styling

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;
```

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: 40px;
        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;
- It can help ensure a consistent `box-sizing` behavior throughout a document by setting it on a parent container.

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

If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?

Master the essentials of CSS (Cascading Style Sheets), the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages. Perfect for beginners looking to establish a solid foundation in CSS.

Learn what CSS is, how to connect it with HTML, and how to style HTML elements using selectors. Explore foundational concepts like text colors, user action pseudo-classes, and variables in CSS.

Discover how to style and format text on your web pages. Learn to apply custom fonts and explore various font properties to enhance the appearance of text.

Learn the fundamentals of the box model, which defines the layout and spacing of elements on a web page. Explore concepts such as box sizing, adding space to elements, working with block-level and inline elements, and utilizing structural and functional pseudo-classes for advanced styling.

Discover Flexbox, a powerful CSS layout method for arranging elements in rows and columns. Learn how to control the direction, alignment, and spacing of elements horizontally and vertically, as well as customize individual flex items for precise layouts.

Learn how to enhance the visual appeal of your web pages with CSS. Explore techniques for applying background colors and images, styling images, using decorative pseudo-elements, and adding shadows to create stunning designs.

Understanding Box Sizing in CSS

Output

inherit

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

2. If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?

Awesome!

Understanding Box Sizing in CSS

Output

inherit

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

2. If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?

Understanding Box Sizing in CSS

Output

inherit

1. What is the default value for the box-sizing property?

2. If a parent element has box-sizing: border-box and a child element has box-sizing: inherit, what value will the child element use for the box-sizing property?

Awesome!

Understanding Box Sizing in CSS

Output

inherit

1. What is the default value for the box-sizing property?

2. If a parent element has box-sizing: border-box and a child element has box-sizing: inherit, what value will the child element use for the box-sizing property?

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

2. If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?

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

2. If a parent element has `box-sizing: border-box` and a child element has `box-sizing: inherit`, what value will the child element use for the `box-sizing` property?