Box model em 2min

Nesse texto quero explicar para você como funciona um modelo muito famoso do CSS, o Box model e como ele é aplicado nos elementos da nossa página. Vamos lá?

Quando estamos renderizando algum elemento na tela, o navegador entende que ele é basicamente uma “caixa”, mas por padrão essa caixa segue um modelo chamado Box model. O principal conceito dele, é definir 4 edges — que seria os cantos do nosso box — sendo eles: margin, border, padding e content.

Quando inspecionamos o navegador e vamos em elements/styles, podemos encontrar algo como isso:

A partir disso podemos definir algumas coisas. O nosso content é basicamente o nosso elemento real, ou seja, o que estamos inserindo na nossa página HTML, a partir disso ele possui as outras propriedades em volta do box. O padding, é a área dentro do elemento, as suas dimensões são definidas a partir da altura e largura do padding-box.

Assim, dentro do padding-box, podemos controlar os espaçamentos internos de um elemento com as seguintes propriedades: padding-top, padding-right, padding-bottom, padding-left ou de forma geral, apenas padding.

Em seguida, ao redor do nosso elemento, temos a área da borda. Aonde suas dimensões são a largura e altura do border-box, que podemos setar valores nas propriedades box-width e border.

E por último, temos a área da margin, que é a parte de fora do nosso elemento, aonde podemos setar valores a partir do margin-box, usando as seguintes propriedades: margin-top, margin-right, margin-left, margin-bottom e de forma geral, margin.

Assim usamos essas propriedades para aplicar espaçamentos fora e dentro do elemento. Para um exemplo mais visual e prático, siga o link a seguir e veja como apliquei isso em um simples box:

Por hoje é só, logo voltarei para dar algumas dicas de CSS! Até a próxima ;)