Ao projetar suas páginas, você trabalhará com diferentes propriedades como larguras, alturas, padding, margens e mais. Quando você definir essas propriedades, será necessário especificar as unidades de medida de comprimento que deseja usar. Existem dois tipos de unidades que você pode usar para definir essas propriedades: unidades relativas e unidades absolutas. Nesta lição, vamos focar apenas em unidades absolutas. Unidades de comprimento absoluto têm comprimento fixo e não são relativas a mais nada. Relativo significa que o comprimento é relativo a outra coisa, como o tamanho da tela ou o tamanho do elemento pai. We will talk more about relative units in the next few lessons. A unidade absoluta mais comum é o pixel (px). Pixels são uma unidade de medida de tamanho fixo em CSS, proporcionando controle preciso sobre as dimensões. Isso significa que 1px é sempre igual a 1/96 de polegada. É importante notar que, embora 1px seja padronizado como 1/96 de polegada para fins de layout CSS, o tamanho físico real de um pixel pode variar dependendo do display. Vamos dar uma olhada em um exemplo de uso de pixels para definir a largura e a altura de uma caixa:

<link rel="stylesheet" href="styles.css" />
<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Neste exemplo, temos uma caixa vermelha com largura e altura definidas como 100px. As dimensões desta caixa permanecerão as mesmas independentemente das alterações relacionadas ao tamanho da tela. Então, se você estiver em um dispositivo com uma tela pequena, a caixa ainda terá 100px de largura. Se você estiver em uma tela grande de desktop, a caixa ainda terá 100px de largura. Então, quando você deve usar unidades absolutas como pixels? Bem, depende da situação. Mas geralmente você usará pixels quando precisar de controle preciso sobre as dimensões, espaçamento e layout do elemento. Às vezes você pode usar pixels para margens, padding e bordas. Aqui está um exemplo de uso de pixels para definir a margem de duas caixas:

<link rel="stylesheet" href="styles.css" />
<div class="box"></div>
<div class="box"></div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 10px;
}

Lembre-se de que margin é o espaço fora da caixa. Então, neste exemplo, a caixa terá uma margem de 10px em todos os lados. Outros tipos de unidades absolutas incluem os seguintes:

• A unidade in (polegadas), que é igual a 96px
• A unidade cm (centímetros), que é igual a 25.2/64 de uma polegada
• A unidade mm (milímetros), que é igual a 1/10 de um centímetro
• A unidade q (quarter-millimeters), que é igual a 1/40 de um centímetro
• A unidade pc (picas), que é igual a 1/6 de polegada
• A unidade pt (pontos), que é igual a 1/72 de polegada

A maioria dessas unidades será usada para impressão e não para telas. Embora a unidade mais comum que você usará seja pixels, é importante saber que as outras unidades absolutas existem.