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.

Representação do Box modelFigura 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 32 pixels de altura e 36 pixels de largura, pois os valores das propriedades height, width e padding serão somados quando o motor de renderização apresentar o mesmo.

O segundo valor possível para essa propriedade é border-box, que define que a altura e largura de um elemento inclui 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, influência 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; }
        

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.

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.