Unidades de Medida CSS
Unidades CSS
CSS tem várias unidades diferentes para expressar um comprimento.
Muitas propriedades CSS aceitam valores de “comprimento”, como width, margin, padding, font-size, etc.
Comprimento é um número seguido por uma unidade de comprimento, como 10px, 2em, etc.
Comprimentos Absolutos
As unidades de comprimento absoluto são fixas e um comprimento expresso em qualquer uma delas aparecerá exatamente com esse tamanho.
Unidades de comprimento absoluto não são recomendadas para uso na tela, porque os tamanhos das telas variam muito. No entanto, eles podem ser usados se a mídia de saída for conhecida, como para layout de impressão.
Unit
Description
cm
centimeters
mm
millimeters
in
inches (1in = 96px = 2.54cm)
px *
pixels (1px = 1/96th of 1in)
pt
points (1pt = 1/72 of 1in)
pc
picas (1pc = 12 pt)
* Pixels (px) são relativos ao dispositivo de visualização. Para dispositivos de baixo dpi, 1px é um pixel de dispositivo (ponto) da tela. Para impressoras e telas de alta resolução, 1px implica em vários pixels de dispositivo.
Comprimentos Relativos
As unidades de comprimento relativo especificam um comprimento relativo a outra propriedade de comprimento. As unidades de comprimento relativo são melhor dimensionadas entre diferentes meios de renderização.
Unit
Description
em
Relative to the font-size of the element (2em means 2 times the size of the current font)
ex
Relative to the x-height of the current font (rarely used)
ch
Relative to the width of the “0” (zero)
rem
Relative to font-size of the root element
vw
Relative to 1% of the width of the viewport*
vh
Relative to 1% of the height of the viewport*
vmin
Relative to 1% of viewport’s* smaller dimension
vmax
Relative to 1% of viewport’s* larger dimension
%
Relative to the parent element
Dica: As unidades em e rem são práticas na criação de layouts perfeitamente escaláveis!
* Viewport = o tamanho da janela do navegador. Se a janela de visualização tiver 50 cm de largura, 1vw = 0,5 cm.
8 comentários
Cristal Cline · outubro 23, 2025 às 9:32 pm
Very engaging — I liked the friendly tone and clear structure.
Abraham Quinn · outubro 25, 2025 às 4:01 am
Thanks for the helpful checklist — it made planning simpler.
Alannah Middleton · outubro 28, 2025 às 3:00 pm
I very delighted to find this internet site on bing, just what I was searching for as well saved to fav
phim heo · novembro 1, 2025 às 2:30 am
I truly appreciate your technique of writing a blog. I added it to my bookmark site list and will
tutorial blogspot · novembro 8, 2025 às 7:45 am
Very well presented. Every quote was awesome and thanks for sharing the content. Keep sharing and keep motivating others.
Izabelle Castaneda · novembro 12, 2025 às 7:51 am
Strong points and clear examples. Please write more on this topic.
Liam Jacobs · novembro 13, 2025 às 3:55 am
A concise guide with practical steps — very helpful indeed.
prodaja stanova · novembro 13, 2025 às 6:52 pm
I’m so glad I took the time to read through this entire post! Your insights are really valuable, and I appreciate how you balanced personal experience with broader research and data. The way you acknowledged different viewpoints while still sharing your own perspective felt very balanced and fair. I’m definitely going to be thinking about this for a while, and I’ve already started implementing some of your suggestions. Thanks for such a thought-provoking read!