CSS: Box Model Explicado

O motor de renderizaç�o do navegador representa cada elemento como uma caixa retangular, de acordo com o padr�o definido pelo CSS conhecido como box (caixa) model. Dessa forma, o conte�do do elemento � uma das quatro partes que comp�em o box, sendo as demais o seu preenchimento, borda e margem. A Figura 1 nos d� uma vis�o desse desenho.

Figura 1. Representaç�o do Box model

Na maioria dos casos, o que vemos � apenas o conte�do do elemento, geralmente um texto, imagem, v�deo, etc. Esse conte�do � o que consideramos as suas dimens�es, altura e largura. Entretanto, � o conte�do somado a margem, borda e preenchimento do elemento que determinam o espaço que o mesmo ocupa na tela do navegador. Por essa raz�o entender o box model � fundamental para a criaç�o de layouts consistentes.

Esta seç�o trata do controle das �reas que comp�em um box: margin, padding, width e height. Para ver essas propriedades serem aplicadas na pr�tica assista ao curso Introduç�o ao CSS na Pr�tica.

Width e Height

As propriedades width e height permitem controlar a altura e largura, como os nomes sugerem, da �rea de conte�do de um elemento. Abaixo vemos um exemplo no qual um par�grafo recebe 16 pixels de altura e 20 de largura:


      div { 
        height: 16px; 
        width: 20px; 
        display: inline-block; 
      }

Algumas vezes pode ser necess�rio ter maior controle sobre as dimens�es de um elemento, especificando o quanto ele poder� crescer ou se encolher na p�gina. Fazemos isso com as propriedades min-width, max-width, min-height e max-height, como no exemplo abaixo:


      div { 
        width: 100px; 
        min-width: 80px; 
      }

A forma como o valor dessas propriedades afetam o elemento depende do valor da propriedade box-sizing. Essa propriedade define como a altura e largura de um elemento s�o calculadas.

O valor padr�o de box-sizing � content-box, que define que a largura e altura de um elemento ser�o definidas pelos valores atribu�dos para as propriedades height e width:


      div { 
        height: 16px; 
        width: 20px; 
        padding: 16px; 
        box-sizing: content-box; 
      }

No caso acima, as dimens�es finais do elemento ser�o 48 pixels de altura (height de 16px + padding de 2 * 16px = 32px) e 52 pixels de largura (width de 20px + padding de 2 * 16px = 32px) pois os valores das propriedades (height e padding) e (width e padding) ser�o somados quando o motor de renderizaç�o do navegador os apresentar.

O segundo valor poss�vel para essa propriedade � border-box, que define que a altura e largura de um elemento deve levar em consideraç�o tamb�m a sua borda e preenchimento.


      div { 
        height: 16px; width: 20px; 
        padding: 16px; 
        box-sizing: border-box; 
      }

Neste caso, uma vez que definimos o padding do elemento como 16 pixels, a altura final do elemento ser� de 32 pixels, considerando que este valor corresponde a �rea de preenchimento superior e inferior (16 + 16). Sendo a altura, height, de 16 pixels, ela ser� considerada dentro dos 32 pixels j� calculados a partir da �rea de preenchimento. Isso acontece pois no box-sizing o elemento tende a se encolher para se ajustar ao espaço correspondente �s suas dimens�es. Uma vez que a altura, height, do elemento supere os 32 pixels definidos pelo padding, por exemplo ao receber 33 pixels, a �rea de conte�do do elemento passar� a ter 1 pixel e a altura final do elemento passar� a ser um pixel maior (33 - 32 = 1). O mesmo se aplica a largura, width.

Padding

A propriedade padding controla a �rea de preenchimento de um elemento, que envolve o seu conte�do. Ela pode receber como valor uma lista de dimens�es, como no exemplo abaixo:


      div { 
        padding: 16px 10px 20px 30px; 
      }

Neste caso, 16 pixels corresponde a �rea superior, top, 10 pixels a direita, 20 a �rea inferior e 30 a esquerda, sendo a distribuiç�o feita como os ponteiros de um rel�gio.

Podemos ainda escrever essas propriedades de forma curta, sendo isso �til em alguns casos nos quais desejamos atribuir o mesmo valor para a parte superior e inferior de uma elemento, tal qual para sua �rea de preenchimento esquerda e direita:


      div { 
        padding: 16px 10px; 
      }

No exemplo acima, a altura da �rea de preenchimento do elemento ter� 32 pixels (16 + 16), enquanto sua largura ser� de 20 pixels.

Existem outras formas de escrever os valores dessa propriedade, por exemplo utilizando tr�s valores:


      div { 
        padding: 16px 10px 20px; 
      }

Assim, definimos os valores para as �reas superior, esquerda e direita ao mesmo tempo, e inferior. Contudo, alguns navegadores podem ter dificuldades em ler essas sintaxe e, portanto, devemos evit�-la.

Vale lembrar que o valor border-box, da propriedade box-sizing, influencia na forma como padding funciona, neste caso empurrando a �rea de conte�do do elemento para dentro. Para saber mais sobre isso leia a seç�o width e height desta documentaç�o.

Margin

A propriedade margin controla a �rea de margem de um elemento, que influencia no espaçamento entre esse e os demais elementos ao seu redor. Ela pode receber como valor uma lista de dimens�es, como no exemplo abaixo:


      div { 
        margin: 16px 10px 20px 30px; 
      }

Neste caso, 16 pixels corresponde a �rea superior, top, 10 pixels a direita, 20 a �rea inferior e 30 a esquerda, sendo a distribuiç�o feita como os ponteiros de um rel�gio.

Podemos ainda escrever esses valores de forma curta, sendo isso �til em alguns casos nos quais desejamos atribuir o mesmo valor para a parte superior e inferior de uma elemento, tal qual para sua �rea de margem esquerda e direita:


      div { 
        margin: 16px 10px; 
      }

No exemplo acima, o elemento ter� uma dist�ncia de 32 pixels (16 + 16) daqueles acima e abaixo dele, enquanto os lados da �rea de margem criar�o uma dist�ncia de 20 pixels.

Existem outras formas de escrever os valores dessa propriedade, por exemplo utilizando tr�s valores:


      div { 
        margin: 16px 10px 20px; 
      }

Border

A propriedade border define o estilo da borda de um elemento. Ela pode receber uma lista de valores de diferentes tipos, como apresentamos a seguir:


      div { 
        border: 1px solid #eee; 
      }

No exemplo acima, o primeiro valor define a largura da borda, que neste caso ser� de 1 pixel. O segundo valor informa o estilo da borda. Por fim podemos atribuir a borda uma cor.

Para determinar a largura da borda podemos utilizar a propriedade border-width. Ao utilizar essa propriedade, podemos definir individualmente as bordas superior, esquerda, inferior e direita de um elemento:


      div { 
        border-width: 1px 2px 1px 2px; 
      }

Neste caso, atribu�mos 1 pixel para a parte superior/inferior e 2 pixels para a borda esquerda/direita do elemento.

Podemos ainda utilizar palavras chave para definir o valor dessa propriedade, sendo elas thin, medium e thick.


      div { 
        border-width: thin; 
      }

No exemplo acima, o elemento ter� uma borda fina aplicada.

Essa propriedade pode receber ainda o valor unset, que cancela os valores anteriormente aplicados.

Com a propriedade border-style determinamos como a borda do elemento ser� apresentada. Ela pode ser s�lida com o valor solid, pontilhada com o valor dotted ou mesmo dupla, se aplicado o valor dashed.


      div { 
        border-style: dotted solid; 
      }

Nesse exemplo, o elemento receber� uma borda superior/inferior pontilhada e esquerda/direita s�lida.

Podemos ainda utilizar o valor none, que cancela qualquer outro anteriormente aplicado.

CSS: Box Model

O motor de renderização do navegador representa cada elemento como uma caixa retangular, de acordo com o padrão definido pelo CSS conhecido como box (caixa) model.

Width e Height

Padding

Margin

Border

Artigos relacionados