Fundamentos de HTML & CSS — Box Model

Essa é uma aula do curso Fundamentos de HTML & CSS, disponibilizado em early-access em nossa página no Facebook, com 60% de desconto. (Utilize o cupom HTMLCSS60)

Abordaremos aqui o conceito de box model. Nesse ponto, os conceitos de altura e largura já foram abordados em aulas anteriores.

Box model

​O box model é um modelo utilizado para definir as dimensões de um objeto, através de propriedades como padding, margin e border.

Cada uma das propriedades pode ser definida de duas maneiras, sendo elas:

Definição individual

É possível definir valores individuais para cada lado do container, de acordo com a seguinte regra:

propriedade-lado: valor

Por exemplo, caso queira definir uma borda somente no lado superior do container, podemos utilizar a propriedade border-top.

Os lados disponíveis são top, bottom, left e right.

Definição shorthand

Propriedades como margin e padding podem ser definidas utilizando uma versão abreviada da regra, conhecida como shorthand. Ela nos permite definir, de maneira sucinta, valores para cada lado do elemento, de acordo com a seguinte regra:

• Caso um valor seja informado, o mesmo será aplicado para todos os lados.

• Caso dois valores sejam informados, o primeiro valor será aplicado na vertical (top e bottom), e o segundo valor será aplicado na horizontal (left e right).

• Caso três valores sejam informados, o primeiro valor será aplicado no lado superior (top), e o segundo valor será aplicado na horizontal (left e right) e o terceiro valor será aplicado no lado inferior (bottom).

• Caso os quatro valores sejam informados, cada valor será aplicado a um lado, em sentido horário — top, right, bottom e left.

Propriedades

Agora, vamos abordar as propriedades que compõem o box model:

Padding

Padding é utilizado para definir a quantidade de espaço entre o conteúdo e a borda do container onde o mesmo está inserido.

Border

Border é utilizado para definir o “contorno” de um container.

Sua regra é composta por três propriedades principais, sendo elas:

• border-style — Define o estilo da borda (sólida, tracejada, pontilhada, etc)
• border-width — Define a largura da borda, normalmente definida em pixels
• border-color — Define a cor da borda

Margin

Margens são utilizadas para definir a quantidade de espaço que o elemento em questão deve manter em relação aos elementos à seu redor.

Box-sizing

Box-sizing nos permite definir se os valores das propriedades border e padding devem ser inclusos no valor total da altura e largura do elemento.

Por padrão, o valor dessa propriedade é content-box, definindo que a altura e largura do elemento não incluem os valores de border e padding.

Vamos tomar como exemplo um elemento com 100px de altura e largura, e inserir 15px de padding em todas as direções.

Caso o valor da propriedade box-sizing seja content-box, a altura e largura serão modificadas para incluir o padding, resultando em um elemento com 130px de altura e largura.

Já se utilizarmos border-box, o elemento será limitado a 100px, e os 15px de padding irão comprimir o conteúdo do mesmo, evitando que suas dimensões sejam alteradas.

Com isso podemos garantir que as dimensões dos elementos serão consistentes, evitando assim problemas de responsividade.

Gostou do artigo? Compartilhe sua opinião conosco!

Não esqueça de conferir nossos cursos e seguir nossa página para receber todas as novidades :)