O que é Box e Boxing?

Se esta achando que são aquele programa de tv onde tem 2 lutadores com luvas e um tentando derrubar o outro não é disto que estamos falando. Em computação é algo menos agressivo, mas é um dos conceitos mais importantes em desenvolvimento web, muito importante em termos de visualização dos objetos HTML.

Sabemos que o browser sem um padrão default para 'renderizar' (exibir) todos os seus elementos html e cada tag html é renderizada em uma linha como num papel pautado só que a altura da linha será igual ao do mais alto elemento empilhado e faz isto como se fossem 'caixas' (box) empilhados sempre da esquerda para a direita, mesmo em países árabes.

Dependendo do tipo do elemento elas são empilhadas horizontalmente se as tags forem inline ( como a span - vide: tags tipo em linha ) e são empilhadas verticalmente se as tags forem do tipo block ( como parágrafo e div - vide : tags tipo Bloco.).

Dentro de cada box de cada tag temos 4 elementos : Margin, Border, Padding e Content (Conteúdo).

A maneira como o browser renderiza essas caixas ('boxes') é chamada de Boxing. É mais ou menos como empilhar containers num navio cargueiro com a desvantagem que num navio cargueiro os containers são padronizados, já no HTML/CSS não são.

É a maneira como o web browser renderiza todos os elementos html, ou seja, cada elemento é exibido dentro de um 'box' ou caixa (vide doc 04).

Porque usamos o Boxing?

Mesmo que tudo que o browser fosse exibir fosse texto o boxing seria necessário. Citando um exemplo, temos uma linha com um texto bem grande (Ex: font-size:50px ) e outro bem menor logo a seguir. Como conseguiríamos colocar o segundo texto pequeno no meio da linha onde o texto grande está sendo exibido?. Sem o boxing seria impossível especialmente se considerarmos o redimensionamento da tela onde os textos podem ser separados em linhas diferentes em pontos diferentes. Veja o exemplo abaixo.

Texto com 50 pixels de tamanho e Texto comum.

No exemplo acima vimos que os 2 textos estão alinhados pela linha inferior, como nas linhas de uma folha de papel almaço...isso foi feito graças ao boxing que de alguma maneira alinhou a exibição do elemento posterior ao anterior.

Com o boxing podemos colocar o texto grande numa 'caixa' e exibir o texto pequeno seguindo as dimensões da caixa grande e com isto alinhar ele ao centro, se desejarmos. Graças a isto fazemos com isso uma dependência de um elemento em relação ao seu antecessor, ou seja, amarramos a exibição dos elementos da linha num modelo comum a todos.

Para que o boxing é importante?

O box é particularmente importante quando trabalhamos com elementos em escala que devem ter uma largura ou altura específica no papel ou determinando uma escala entre o elemento exibido e o real, como a planta de uma casa.

Na exibição da planta de uma casa se os elementos não estiverem em escala você vai ter que colocar as dimensões em cada parede, porta fazendo com que a planta pareça muito mais detalhada, o que pode agradar um engenheiro mas não o proprietário.

Como o browser trabalha o Boxing?

Fazendo uma análise detalhada e profunda no elemento, quando dizemos que o elemento tem x de altura por y de largura nisso o browser incluí as margens, bordas e paddings ? Como o browser trabalha com isso ?, se pode ou não, definir o que deve ser levado em conta para dimensionar o elemento da maneira que queremos? O browser tem um 'default' para isso?.

Antes de prosseguir, vamos analisar cada componente do elemento, do mais externo para o mais interno.

1-O Componente margin

O componente margin do box do elemento separa ele dos demais a sua volta. Sem a margem o elemento ficaria 'colado' um ao outro dificultando sua visualização. Note que a margem não pertence ao elemento em si mas é um 'separador' externo ao elemento.

1.1-Podemos definir a espessura do componente margin.

1.2-A cor de fundo ou a cor do componente margem sempre vai ser a cor do fundo do elemento pai ou agrupador (não podemos definimos sua cor).

1.3-Apesar do componente margin estar 'ligada' a um elemento ele é espaço entre o elemento e o seu pai/agrupador e a cor que fica é a do elemento pai/agrupador/container.

2-O componente border

A borda é um elemento decorativo utilizado para definir a região total ocupada pelo elemento. Ele é a soma das dimensões do elemento mais o padding. Em Power-BI este elemento é definido como 'Fronteira Visual' porque define onde começa e termina o elemento.

2.1-Podemos definir tudo no componente borda : tamanho/espessura , cor, etc...

2.2-Delinea onde começa e termina o elemento. Separa o elemento do resto da página.

3-O componente padding

O elemento padding é um espaço entre o conteúdo do elemento e a borda. É muito útil para dar um espaço entre o conteúdo do elemento e a borda de maneira que o conteúdo não 'cole' na borda. Em termos gerais é uma 'margem' entre o conteúdo do elemento e a borda.

3.1-Podemos definir a espessura/tamanho do componente padding.

3.2-Como o elemento margin a sua cor de fundo sempre será a cor de fundo do elemento container.

4-O componente conteúdo (content)

Finalmente chegamos ao elemento que desejamos exibir. Pode ser uma imagem, texto ou qualquer tag html.
Este é o elemento mais importante, o que realmente queremos exibir. O resto é figuração.

4.1-Podemos definir tudo do componente elemento: tamanho/espessura , cor, etc...

Portanto, jamais poderemos ver todos os elementos do box com cores diferentes. Ficaria bizarro mas muito didático.

Como o browser trabalha com o boxing

Voltando ao boxing ( maneira como o browser empilha as tags), temos 3 tipos possíveis de boxing no web browser e é o estilo box-sizing que define isso :

1-Parâmetro : content-box: é o modo default.

2-Parâmetro : border-box : precisamos definir no estilo esta opção.

3-Parâmetro : inheriting : O mesmo box-sizing do elemento pai e precisamos definir no estilo esta opção.

O box-sizing determina o que será levando em conta na renderização do elemento na página, o que deve ser contado como parte do elemento e o que não.

box-sizing:content-box

Este é o default do browser. Neste quando definimos que o elemento tem x pixels de largura e y pixels de comprimento isto se aplica apenas ao conteúdo do elemento em si sem contar a margem, a borda, o padding. Portanto se determinarmos este modo o elemento será renderizando com esse tamanho interno e a margem, borda e padding serão acrescentados por fora.

A melhor maneira de entender é exemplificar da maneira mais simples possível (já que é uma coisa complexa):

A div abaixo esta formatada com os seguintes critérios:

.classe1{
            height:100px;
            width:150px;
            background-color:blue;
            padding:10px;
            border:20px solid red;
            margin:30px; }

.classecb{
            box-sizing:content-box;
}

        <div style="background-color:green;">
            <div class="classe1 classecb">Conteúdo</div>
        </div><br /><br />

Entrando no depurador do browser e selecionando o elemento podemos ver em detalhes como o elemento foi renderizado:

Sendo assim temos a seguinte matemática:

1-O elemento tem 150px de largura mais 10px do padding, mais 20 do border e mais 30 do margin então o elemento ocupou 210px de largura.

2-O elemento tem 100px de altura mais 10px do padding, mais 20 do border e mais 30 do margin ficando com 160px de altura.

Note que a classe .classecb é opcional já que é a default do browser.

Conclusão

Quando utilizamos o estilo default de exibição dos boxes, box-sizing:content-box, dizemos que tudo esta FORA dele, ou seja, a margem, borda e padding não são contados no tamanho do elemento, são externos. .

box-sizing:border-box

No exemplo abaixo temos exatamente as mesmas divs do exemplo anterior com um estilo alterado - Somante a classe classecb foi foi retirada e em seu lugar foi colocada a classe classebb (border-box):

.classebb{    box-sizing:border-box; }

Entrando no depurador do browser e selecionando o elemento podemos ver em detalhes como o elemento foi renderizado:

Sendo assim temos a seguinte matemática:

1-O elemento tem 150px de largura mas 30px foram tomados pela margem, 20px pela borda, 10px pelo padding ficando disponível apenas 90px de largura para o elemento.

2-O elemento tem 100px de altura mas 30px foram tomados pela margem, 20px pela borda, 10px pelo padding ficando apenas 40px para o elemento.

Conclusão

Quando utilizamos o estilo default de exibição dos boxes, box-sizing:border-box, dizemos que tudo esta dentro dele, ou seja, o espaço de cada elemento do box é contado.

Neste modelo se um elemento tem xpx largura e ypx de altura estamos incluindo nesse tamanho : Margem, Borda e padding.

inheriting (herança)

Este estilo define para a tag o mesmo formato do seu elemento pai ou container, seja ele content-box ou border-box. Contudo lembre-se que precisa ser definido no estilo esta opção, não é a default para nenhuma tag html.