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

A propriedade `box-sizing` é utilizada para controlar como o tamanho total de um elemento é calculado, especificamente em relação às suas propriedades `width` e `height`. Existem três valores possíveis para a propriedade `box-sizing`. Veja o que cada um desses valores significa:
```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>
          O padding e a borda são adicionados ao valor de largura e altura. Assim,
          o tamanho total fica maior que 200px.
        </p>
      </div>

      <div class="card border-box">
        <h3>border-box</h3>
        <p>
          O padding e a borda já estão incluídos na largura e altura de 200px. A
          caixa permanece exatamente com 200px.
        </p>
      </div>
    </div>
  </body>
</html>


## inherit
- O valor `inherit` permite que a propriedade `box-sizing` de um elemento herde seu valor do elemento pai;
- Isso significa que o comportamento de `box-sizing` do elemento atual é determinado pela propriedade `box-sizing` do elemento pai;
- Pode ajudar a garantir um comportamento consistente de `box-sizing` em todo o documento ao defini-lo em um contêiner pai.

Qual é o valor padrão da propriedade `box-sizing`?

Se um elemento pai possui `box-sizing: border-box` e um elemento filho possui `box-sizing: inherit`, qual valor o elemento filho usará para a propriedade `box-sizing`?

Domine os conceitos essenciais de CSS (Cascading Style Sheets), a linguagem de estilização que transforma a aparência das páginas web. Explore conceitos fundamentais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas. Ideal para iniciantes que desejam estabelecer uma base sólida em CSS.

Aprenda o que é CSS, como conectá-lo ao HTML e como estilizar elementos HTML utilizando seletores. Explore conceitos fundamentais como cores de texto, pseudo-classes de ação do usuário e variáveis em CSS.

Descubra como estilizar e formatar texto em suas páginas web. Aprenda a aplicar fontes personalizadas e explore diversas propriedades de fonte para aprimorar a aparência do texto.

Aprenda os fundamentos do modelo de caixa, que define o layout e o espaçamento dos elementos em uma página web. Explore conceitos como dimensionamento de caixas, adição de espaço aos elementos, trabalho com elementos de bloco e em linha, e utilização de pseudo-classes estruturais e funcionais para estilização avançada.

Descubra o Flexbox, um método avançado de layout em CSS para organizar elementos em linhas e colunas. Aprenda a controlar a direção, o alinhamento e o espaçamento dos elementos horizontal e verticalmente, além de personalizar itens individuais para layouts precisos.

Aprenda a aprimorar o apelo visual de suas páginas web com CSS. Explore técnicas para aplicar cores e imagens de fundo, estilizar imagens, utilizar pseudo-elementos decorativos e adicionar sombras para criar designs impressionantes.

Compreendendo o Dimensionamento de Caixas no CSS

Saída

inherit

1. Qual é o valor padrão da propriedade `box-sizing`?

2. Se um elemento pai possui `box-sizing: border-box` e um elemento filho possui `box-sizing: inherit`, qual valor o elemento filho usará para a propriedade `box-sizing`?

Awesome!

Compreendendo o Dimensionamento de Caixas no CSS

Saída

inherit

1. Qual é o valor padrão da propriedade `box-sizing`?

2. Se um elemento pai possui `box-sizing: border-box` e um elemento filho possui `box-sizing: inherit`, qual valor o elemento filho usará para a propriedade `box-sizing`?

Compreendendo o Dimensionamento de Caixas no CSS

Saída

inherit

1. Qual é o valor padrão da propriedade box-sizing?

2. Se um elemento pai possui box-sizing: border-box e um elemento filho possui box-sizing: inherit, qual valor o elemento filho usará para a propriedade box-sizing?

Awesome!

Compreendendo o Dimensionamento de Caixas no CSS

Saída

inherit

1. Qual é o valor padrão da propriedade box-sizing?

2. Se um elemento pai possui box-sizing: border-box e um elemento filho possui box-sizing: inherit, qual valor o elemento filho usará para a propriedade box-sizing?

1. Qual é o valor padrão da propriedade `box-sizing`?

2. Se um elemento pai possui `box-sizing: border-box` e um elemento filho possui `box-sizing: inherit`, qual valor o elemento filho usará para a propriedade `box-sizing`?

1. Qual é o valor padrão da propriedade `box-sizing`?

2. Se um elemento pai possui `box-sizing: border-box` e um elemento filho possui `box-sizing: inherit`, qual valor o elemento filho usará para a propriedade `box-sizing`?