CSS 2: Display#

Para deixar um documento HTML mais parecido com um sketch, precisamos definir o tamanho e a posição de cada elemento. No entanto, definir tamanho e posição de um elemento é mais que simplesmente escrever algo como "tem altura A, largura B e posição X, Y". Por quê? Porque essas propriedades influenciam e são influenciadas por outros elementos. Por exemplo:

um elemento pode ter um tamanho menor ou maior dependendo do tamanho do seu pai;
um elemento pode ter um tamanho menor ou maior dependendo da quantidade e do tamanho dos seus filhos;
um elemento pode ter uma posição mais alta ou mais baixa dependendo da quantidade e do tamanho dos seus irmãos.

Por isso, antes de entrar em detalhes sobre tamanho e posição, vamos entender alguns valores padrão da propriedade display, que define como essas propriedades influenciam e são influenciadas por outros elementos.

Display block#

Pelas regras de formatação dos navegadores mais populares, a maioria dos elementos tem a propriedade

display: block;

por padrão. O que essa propriedade significa? De maneira geral, os elementos block podem ser descritos como "elementos que ficam um em cima do outro". De maneira mais específica, eles podem ser descritos pelas seguintes características:

por padrão, um elemento block fica abaixo do irmão que vem logo antes e acima do irmão que vem logo depois, ou seja, ele nunca fica ao lado de outro elemento;
por padrão, um elemento block ocupa toda a largura do seu pai, mas isso pode ser modificado através da propriedade width;
por padrão, um elemento block ocupa a altura mínima necessária para os seus filhos caberem, mas isso pode ser modificado através da propriedade height;
outros elementos respeitam a margin e o padding de um elemento block.

Todas essas características podem ser observadas no exemplo abaixo. Os elementos header, ul, li, main, h1, p, footer são todos block por padrão no Chrome.

Exercise 1

Descomente o CSS para observar que a margin e o padding são respeitados.

index.css
index.html

header,
ul,
li,
main,
h1,
p,
footer {
  /*
  margin: 10px;
  padding: 10px;
  */
}

header {
  background-color: red;
}

ul {
  background-color: green;
}

li {
  background-color: blue;
}

main {
  background-color: cyan;
}

h1 {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

p {
  background-color: magenta;
}

footer {
  background-color: gold;
}
<header>
  header
  <ul>
    ul
    <li>li</li>
    <li>li</li>
  </ul>
</header>
<main>
  main
  <h1>h1</h1>
  <p>p</p>
</main>
<footer>footer</footer>

Preview

Answer

Após a mudança você deve observar um maior espaçamento interno e externo em todos os elementos, pois todos são do tipo block.

Exercise 2

Answer

Se necessário, releia a lista de características do display: block.

Display inline#

Pelas regras de formatação dos navegadores mais populares, vários elementos têm a propriedade

display: inline;

por padrão. O que essa propriedade significa? De maneira geral, os elementos inline podem ser descritos como "elementos que ficam um ao lado do outro". De maneira mais específica, eles podem ser descritos pelas características abaixo.

Por padrão, um elemento inline que vem depois de outro elemento inline fica à direita desse outro elemento, desde que caiba no espaço horizontal do pai. Se não couber, ele "cai" para a linha de baixo. Em outras palavras, uma sequência de elementos inline é como uma sequência de palavras em um texto: ela "quebra" quando o espaço horizontal acaba.
Por padrão, um elemento inline ocupa a largura mínima necessária para os seus filhos caberem. Isso não pode ser modificado através da propriedade width. De fato, a propriedade width é totalmente ignorada.
Por padrão, um elemento inline ocupa a altura mínima necessária para os seus filhos caberem. Isso não pode ser modificado através da propriedade height. De fato, a propriedade height é totalmente ignorada.
Outros elementos respeitam a margin e o padding horizontais de um elemento inline, mas não respeitam a margin e o padding verticais desse elemento. Do ponto de vista dos outros elementos, é como se margin-top, margin-bottom, padding-top, padding-bottom fossem sempre zero.

Todas essas características podem ser observadas no exemplo abaixo. Os elementos em, a, tt, strong, small, big são todos inline por padrão no Chrome.

Clique em Edit on CodePen e veja o que acontece quando você aumenta a margin ou o padding horizontais (right/left). Depois veja o que acontece quando você aumenta a margin ou o padding verticais (top/bottom). Veja ainda o que acontece quando você descomenta width e height.

Exercise 3

Descomente o CSS para observar que o width e height são totalmente ignorados.

index.css
index.html

em,
a,
tt,
strong,
small,
big {
  margin: 0 0;
  padding: 0 0;
}

em {
  background-color: red;
}

a {
  background-color: green;
}

tt {
  background-color: blue;
}

strong {
  background-color: cyan;
}

small {
  /*
  width: 100px;
  height: 100px;
  */
  background-color: yellow;
}

big {
  background-color: magenta;
}
<em>
  em
  <a>a</a>
  <tt>tt</tt>
</em>
<strong>
  strong
  <small>small</small>
  <big>big</big>
</strong>
<em>
  em
  <a>a</a>
  <tt>tt</tt>
</em>
<strong>
  strong
  <small>small</small>
  <big>big</big>
</strong>
<em>
  em
  <a>a</a>
  <tt>tt</tt>
</em>
<strong>
  strong
  <small>small</small>
  <big>big</big>
</strong>

Preview

Answer

Nada deve ter mudado após descomentar o código. Esse é o resultado esperado. No CSS, o efeito das propriedades depende do display do elemento e de seus ancestrais.

Exercise 4

Answer

O espaço entre os filhos é criado adicionando um valor de margem. Se necessário, releia a lista de características do display: inline.

Display inline-block#

Ainda não acabou! Alguns elementos ainda têm a propriedade

display: inline-block;

por padrão. Como o nome sugere, um elemento inline-block mistura características de inline e block. Mais especificamente, mistura a característica 1 de inline com as características 2, 3, 4 de block. Na verdade, uma versão adaptada da característica 2:

um elemento inline-block ocupa uma largura padrão, mas isso pode ser modificado através da propriedade width.

Em outras palavras, elementos inline-block combinam a capacidade de ficar um ao lado do outro com a capacidade de modificar largura e altura através de width e height. Além disso, outros elementos respeitam a margin e o padding de um elemento inline-block, independente de serem horizontais ou verticais.

Todas essas características podem ser observadas no exemplo abaixo. Os elementos img, input são todos inline-block por padrão no Chrome.

Exercise 5

Answer

É esperado que as imagens e os inputs aumentem de tamanho. Você pode mudar o zoom (1x, 0.5x, 0.25x) para observar o comportamento dos elementos em tamanhos diferentes de tela.

Observações adicionais#

Os valores block, inline e inline-block são importantes, mas não os únicos possíveis para display. Vamos ver outros conforme necessário.
Sempre que uma definição de width, height, margin-top, margin-bottom, padding-top ou padding-bottom não estiver funcionando, verifique se o elemento não tem display: inline.
Você pode definir display como qualquer outra propriedade CSS. Se quiser fazer com que p seja inline, você pode. Se quiser fazer com que a seja block, você pode. Mas isso raramente é necessário.
Reparou que o último exemplo tem vertical-align: middle? Cuidado com essa propriedade. Muitos desenvolvedores iniciantes tentam usá-la para alinhar um elemento block em relação ao seu pai, mas isso só funciona para alinhar elementos inline em relação à linha do texto. Lembre-se disso para não desperdiçar horas perguntando "por que o vertical-align não funciona".