Artigos CSS CSS: Unidades

Um vasto conjunto de propriedades pode receber valores numéricos. São exemplos width, height, margin, padding, border e muitas outras. No CSS temos dois grupos básicos de valores que podem ser utilizados dessa maneira, as unidades de valor absoluto e relativo.

Valores

As unidades de comprimento absoluto não recebem influência de outros fatores quanto ao cálculo do seu comprimento. Ao utilizá-las, o tamanho final computado corresponde exatamente ao valor declarado.

São exemplos de valores absolutos:

cmcentímetros
mmmilímetros
inpolegadas
pxpixels
ptpontos
pcpaica

As unidades de comprimento relativo têm seu comprimento final afetado por outros fatores. Elas são utilizadas quando precisamos escalar as dimensões do elemento.

Por exemplo, se desejamos que um texto dos parágrafos da página tenham 14 pixels, exceto quando estiverem em um determinado container, podemos fazer o seguinte:


            html { font-size: 14px; }
            .container { font-size: 2em }

Neste exemplo, o texto da página terá uma altura de 14 pixels, contudo quando dentro do elemento de classe container seu tamanho será duas vezes esse valor.

São exemplos de valores relativos:

em1em é uma vez o font-size do elemento
rem1rem é uma vez o font-size do elemento acima na hierarquia de elementos
vw1vw é 1% da largura da janela do navegador
vh1vh é 1% da altura da janela do navegador
vmin1vmin é 1% da menor dimensão da janela do navegador
vmax1vmax é 1% da maior dimensão da janela do navegador
%calcula o tamanho relativo ao elemento pai

Confira também

Cursos de HTML e CSS

Cursos de HTML e CSS

Curso
Introdução ao CSS na prática

Introdução ao CSS na prática

Curso
Guia de CSS

Guia de CSS

Guia