CSS - unidades de medida

Antes de iniciarmos o exercício real, gostaríamos de dar uma breve ideia sobre as unidades de medição CSS. CSS suporta uma série de medidas, incluindo unidades absolutas, como polegadas, centímetros, pontos e assim por diante, bem como medidas relativas, como porcentagens e unidades em. Você precisa desses valores ao especificar várias medidas em suas regras de estilo, por exemploborder = "1px solid red".

Listamos todas as unidades de medição CSS, juntamente com os exemplos adequados -

Unidade Descrição Exemplo
% Define uma medida como uma porcentagem em relação a outro valor, normalmente um elemento envolvente. p {tamanho da fonte: 16pt; altura da linha: 125%;}
cm Define uma medida em centímetros. div {margem inferior: 2cm;}
em Uma medida relativa da altura de uma fonte em espaços eme. Como uma unidade em é equivalente ao tamanho de uma determinada fonte, se você atribuir uma fonte a 12pt, cada unidade "em" terá 12pt; assim, 2em seria 24pt. p {espaçamento entre letras: 7em;}
ex Este valor define uma medida relativa à altura x de uma fonte. A altura x é determinada pela altura da letra x minúscula da fonte. p {tamanho da fonte: 24pt; altura da linha: 3ex;}
no Define uma medida em polegadas. p {espaçamento entre palavras: 0,15 pol;}
milímetros Define uma medida em milímetros. p {espaçamento entre palavras: 15 mm;}
pc Define uma medida em picas. Uma pica equivale a 12 pontos; portanto, existem 6 picas por polegada. p {tamanho da fonte: 20pc;}
pt Define uma medida em pontos. Um ponto é definido como 1/72 de polegada. corpo {tamanho da fonte: 18pt;}
px Define uma medida em pixels da tela. p {padding: 25px;}