CSS 2: Tamanho#

Agora que sabemos que width e height podem ser totalmente ignoradas dependendo do display, podemos agora entrar em detalhes sobre tamanho.

Porcentagem#

Até agora usamos apenas a unidade px, mas as propriedades quantitativas aceitam outras unidades. A unidade % é particularmente útil para definir tamanhos relativos, ou seja, proporcionais ao tamanho do pai.

Exercise 1

Modifique o CSS de modo que o elemento main ocupe metade da largura do seu pai.

index.css
index.html

body {
  padding: 10px;
}

main {
  width: 75%;
  background-color: gold;
}
<main>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
  nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
  in culpa qui officia deserunt mollit anim id est laborum.
</main>

Preview

Resultado esperado

Answer

Mudar o zoom (1x, 0.5x, 0.25x) para observar que a largura do elemento main varia conforme o tamanho da janela.

body {
  padding: 10px;
}

main {
  width: 50%;
  background-color: gold;
}

Exercise 2

Answer

Os valores 1/4 e 3/4 são inválidos no CSS, pois na verdade eles representam uma conta (1 dividido por 4 e 3 dividido por 4, respectivamente). Os valores de largura devem ser números seguidos de uma unidade (ex: px ou %).

Limites#

Existem também propriedades que limitam o tamanho de um elemento:

min-width;
max-width;
min-height;
max-height.

Combinar essas propriedades com tamanhos em porcentagem é particularmente útil do ponto de vista de usabilidade, pois elementos estreitos demais ou largos demais prejudicam a legibilidade do conteúdo.

index.css
index.html

body {
  padding: 10px;
}

main {
  width: 75%;
  min-width: 100px;
  max-width: 200px;
  background-color: gold;
}
<main>
  Lorem ipsum dolor sit amet,
  consectetur adipiscing elit,
  sed do eiusmod tempor
  incididunt ut labore et
  dolore magna aliqua. Ut enim
  ad minim veniam, quis
  nostrud exercitation ullamco
  laboris nisi ut aliquip ex
  ea commodo consequat. Duis
  aute irure dolor in
  reprehenderit in voluptate
  velit esse cillum dolore eu
  fugiat nulla pariatur.
  Excepteur sint occaecat
  cupidatat non proident, sunt
  in culpa qui officia
  deserunt mollit anim id est
  laborum.
</main>

Preview

Exercise 3

Qual será a altura de um elemento block com as propriedades:

height: 1000px;
max-height: 50px;

0 pixels

1000 pixels

500 pixels

50 pixels

Answer

O max-height limita a altura do elemento.

Overflow#

Independente de usar uma unidade absoluta como px ou uma unidade relativa como %, sempre que você fixa a largura ou a altura de um elemento, corre o risco de causar overflow, ou seja, o tamanho do elemento pode ser pequeno demais para o conteúdo.

Exercise 4

Answer

Dependendo da largura da janela, os filhos do elemento main, ou seja, o texto, ocupam uma altura maior do que 100px. Isso faz com que o elemento main seja pequeno demais para o seu conteúdo. Você pode alterar o zoom para 0.5x ou 0.25x. Note que em alguns casos o texto cabe dentro do elemento.

Idealmente, isso não deveria acontecer. Porém, se for inevitável, podemos usar a propriedade overflow para mitigar o problema. Por exemplo, podemos usar o valor hidden para estabelecer que o "estouro" deve ser "cortado".

Exercise 5

Answer

O valor hidden define que o conteúdo é apenas escondido visualmente, mas ele continua existindo no documento.

Podemos também usar o valor scroll para adicionar uma barra de rolagem.

Codepen-embed

CodePen

Mas não recomendamos fazer isso a menos que você tenha um motivo muito forte. Barras de rolagem em regiões limitadas são claustrofóbicas, ruins de usar e, muitas vezes, feias.