Unidade do CSS

Unidade do CSS

Existem várias unidades de comprimento diferentes em CSS.

Muitas propriedades CSS aceitam valores de "comprimento", como largura,margem,padding,font-size etc.

Comprimento é um número seguido de uma unidade de comprimento, como 10px,2em etc.

exemplo

Definir diferentes valores de comprimento usando px (pixels):

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Experimente pessoalmente

Não deve haver espaços entre o número e a unidade. No entanto, se o valor for 0, a unidade pode ser omitida.

Para algumas propriedades CSS, é permitido usar comprimentos negativos.

Existem dois tipos de unidades de comprimento:unidades absolutaseunidades relativas.

comprimento absoluto

Unidades de comprimento absoluto são fixas, qualquer comprimento representado por uma unidade absoluta será exibido exatamente deste tamanho.

Não é recomendado usar unidades de comprimento absolutas na tela, pois o tamanho da tela varia muito. No entanto, se o meio de saída conhecido pode ser usado, por exemplo, para layout de impressão (print layout).

unidade descrição TIY
cm centímetro Experimente
mm milímetro Experimente
in polegada (1in = 96px = 2,54cm) Experimente
px * pixel (1px = 1/96 de 1 polegada) Experimente
pt ponto (1pt = 1/72 de 1 polegada) Experimente
pc pica (1pc = 12 pt) Experimente

* pixel (px) é em relação ao dispositivo de visualização. Para dispositivos de dpi baixo, 1px é um pixel de dispositivo (ponto) no monitor. Para impressoras e telas de alta resolução, 1px representa múltiplos pixels de dispositivo.

comprimento relativo

Unidades de comprimento relativo definem o comprimento em relação a outra propriedade de comprimento. As unidades de comprimento relativo se ajustam melhor entre diferentes meios de renderização.

unidade descrição TIY
em tamanho da fonte do elemento (font-size) (2em representa o dobro do tamanho da fonte atual) Experimente
ex em relação ao x-height da fonte atual (raramente usado) Experimente
ch largura em relação a "0" (zero) Experimente
rem tamanho da fonte do elemento raiz (font-size) Experimente
vw 1% da largura do viewport* Experimente
vh 1% da altura do viewport* Experimente
vmin 1% do tamanho do viewport* Experimente
vmax Relativamente ao tamanho maior da visão de 1% Experimente
% Relativamente ao elemento pai Experimente

Dica:Unidades em e rem podem ser usadas para criar layouts completamente escaláveis!

* Visão (Viewport) = tamanho da janela do navegador. Se o viewport for de 50 cm de largura, então 1vw = 0.5 cm.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa unidade de comprimento.

Unidades de comprimento
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0