Tutorial Modelo de Caixa CSS | HTML & CSS é Difícil

No capítulo anterior introduzimos o básico de formatação de texto usando propriedades da CSS, mas isso é somente um dos aspectos da estilização de páginas. Definir o layout de uma página web é um troço totalmente diferente. Esse capítulo é sobre isso.

O “Modelo de Caixa CSS” é um conjunto de regras que definem como toda a página será renderizada na Web. A CSS trata cada elemento na HTML como uma “caixa”, com um monte de propriedades diferentes que determinam onde ela aparecerá na tela. Assim, todas as nossas páginas web tem só um monte de elementos renderizados um depois do outro. O modelo de caixa é nossa caixa de ferramentas para customizar esse esquema padrão de apresentação.

Diagram: CSS stylesheet broken down into two parts (text formatting and the box model)

Uma grande parte do seu trabalho como desenvolvedor web será aplicar as regras do modelo de caixa CSS para transformar um design modelo em uma página web. Enquanto você trabalha nesse capítulo, você vai se perguntar porque aprender todas essas regras ao invés de só carregar uma imagem estática gigante de uma página web (ex. um modelo) em um servidor web e acabar com o problema?

De fato, isso tornaria nossa vida muito fácil; porém, se não pudermos separar nosso conteúdo dentro da HTML, mecanismos de pesquisa não teriam uma forma de inferir sobre a estrutura da nossa página web, não poderíamos tornar nossa página responsiva, e não teria forma de colocar animações super legais ou interatividade com o JavaScript. Esse é uma grande troca para fazer a CSS valer a pena.

Este capítulo vai cobrir os principais componentes do modelo de caixa CSS: preenchimento (padding), bordas, margens, caixas de bloco, e caixas em linha. Você pode pensar nisso como uma visão “micro” dos layouts CSS, como elas definem o comportamento individual das caixas. Em capítulos futuros, vamos aprender mais sobre como a estrutura HTML e o modelo de caixas CSS combinam para formar todos os tipos complexos de layout de páginas.

Configuração

Pra começar, vamos criar agora uma nova pasta chamada css-box-model e um novo arquivo dentro dela chamado boxes.html. Adicione o seguinte código:

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Caixas são Fáceis!</title>
    <link rel='stylesheet' href='box-styles.css'/>
  </head>
  <body>
    <h1>Cabeçalhos são Elementos de Bloco</h1>

    <p>Parágrafos são blocos também! <em>However</em>, &lt;em&gt; and &lt;strong&gt;
       elements are not. They are <strong>inline</strong> elements.</p>

    <p>Elementos de bloco definem o fluxo do documento HTML, enquanto elementos em linha
       não.</p>
  </body>
</html>

Como você deve lembrar do capítulo Olá, CSS, esse arquivo HTML está vinculado a uma folha de estilos CSS que está armazenada em um arquivo chamado box-styles.css. Vamos lá, crie esse arquivo também (você pode deixar ele em branco por enquanto).

Ainda bem que você já está familiarizado com o Atom para criar esses arquivos e pastas. Se não, dê uma olhada no passo a passo do Atom no capítulo de introdução desse tutorial.

Elementos de Bloco e
Elementos em Linha

Voltando nas Páginas Web Básicas, nós introduzimos brevemente como usar “caixas” CSS para definição do layout de uma página web. Cada elemento HTML é apresentado na tela é uma caixa, e elas vem em dois sabores: caixas de “bloco” e caixas em “linha“.

Diagram: comparison of block boxes with inline boxes

Todos os elementos que trabalhamos até o momento usam um tipo de caixa padrão. Por exemplo, <h1> e <p> são elementos de nível de bloco, enquanto <em> e <strong> são elementos de linha. Vamos dar uma olhada melhor nessas caixas adicionando uma cor de fundo no box-styles.css:

h1, p {
  background-color: #DDE0E3;    /* Cinza claro */
}

em, strong {
  background-color: #B2D6FF;    /* Azul claro */
}

A propriedade background-color só preencheu o fundo da caixa selecionada, então isso vai nos dar uma visão mais clara sobre a estrutura da página de exemplo. Nossos cabeçalhos e parágrafos devem estar com um fundo cinza, enquanto os elementos de ênfase e o forte, devem estar com um azul claro.

Web page highlighting block boxes in gray and inline boxes in blue

Esse exemplo nos mostra alguns comportamentos importantes associados às caixas de blocos e em linha:

Caixas de bloco sempre aparecem abaixo do elemento de bloco anterior. Isso é o fluxo “natural” ou “estático” de um documento HTML quando ele é renderizado por um navegador web.
A largura das caixas de bloco é configurada automaticamente baseado na largura do seu conteiner pai. Nesse caso, nosso bloco são sempre a largura da janela do navegador.
A altura das caixas de bloco padrão é baseada no conteúdo que ela contém. Quando você diminui muito a janela do navegador, o <h1> fica dividida em duas linhas, e sua altura é ajustada de acordo.
Caixas em linha não afetam o espaçamento vertical. Eles não são usadas para determinada o layout—eles são para estilizar as coisas dentro do bloco.
A largura da caixa em linha é baseada no conteúdo que ela contém, não na largura do elemento pai.

Mundando o Comportamento da Caixa

Nós podemos substituir o tipo de caixa padrão dos elementos HTML com a propriedade display da CSS. Por exemplo, se nós quiséssemos mudar nossos elementos <em> e <strong> para elementos de bloco ao invés de elementos de linha, precisamos atualizar nossa regra no arquivo box-styles.css para o seguinte:

em, strong {
  background-color: #B2D6FF;
  display: block;
}

Agora, esses elementos agem como nosso cabeçalho e o parágrafo: eles começam na sua própria linha, e preenchem a largura total da janela do navegador. Isso é interessante quando você quiser transformar elementos como o <a> em botões ou formatar o elemento <img/> (ambos são caixas em linha por padrão).

Web page showing what happens when you turn inline boxes into block boxes with the CSS display property

No entanto, é quase sempre uma péssima ideia mudar o comportamento do <em> e do <strong> para elementos de bloco, então vamos retornar a nossa configuração padrão e mudar a propriedade display para inline, como era antes:

em, strong {
  background-color: #B2D6FF;
  display: inline;             /* Esse é o padrão para em e strong */
}

Conteúdo, Preenchimento, Borda,
e Margem

O “modelo de caixa CSS” é um conjunto de regras que determinam as dimensões de todos os elementos em uma página web. Ele dá para cada caixa (tanto de linha quando de bloco) quatro propriedades:

Conteúdo – O texto, a imagem ou qualquer outra conteúdo de mídia no elemento.
Preenchimento – O espaço entre o conteúdo da caixa e sua borda.
Borda – A linha entre o preenchimento da caixa e a margem.
Margem – O espaço entre a caixa e as outras caixas em volta.

Juntas, isso é tudo que um navegador precisa para mostrar os elementos de uma caixa. O conteúdo é o que você coloca em um documento HTML, e são as únicas coisas que tem algum significado semântico (que é o por quê está em um HTML). O resto é puramente apresentação, por isso são definidas através de regras CSS.

Diagram: content, padding, border, and margins making up the CSS box model

Preenchimento

Vamos começar de dentro pra fora. Já trabalhamos com o conteúdo, então vamos continuar com o preenchimento. A propriedade padding…você adivinhou…define o preenchimento do elemento selecionado:

h1 {
  padding: 50px;
}

A linha acima vai adicionar 50 pixels para cada lado do cabeçalho <h1>. Note como a cor de fundo se expande para preencher o espaço. Isso é o que sempre acontece quando mexemos no preenchimento por que ele está dentro da borda, e tudo dentro da borda tem um fundo.

Web page showing increase in <h1> padding (background size increases)

Mas às vezes a gente só quer mexer em um dos lados do elemento. Para isso, a CSS permite que usemos as seguintes propriedades:

p {
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

Você pode usar qualquer unidade para o preenchimento de um elemento, não só pixels. De novo, em unidades são particularmente úteis para deixar sua margem escalar com base no tamanho da fonte.

Formatos Abreviados

Digitar todas essas propriedades pode ser cansativo, por isso a CSS tem uma alternativa, um formato abreviado da propriedade padding que nos permite configurar o preenchimento superior/inferior e da esquerda/direita com uma única linha da CSS. Quando você dá dois valores para a propriedade padding, ela interpreta como valores de preenchimento vertical e horizontal, respectivamente.

Diagram: CSS padding property with vertical and horizontal values highlighted

Isso significa que nossa regra anterior pode ser reescrita assim:

p {
  padding: 20px 10px;  /* Vertical  Horizontal */
}

Outra alternativa, se você definir quatro valores, você irá configurar o preenchimento para cada lado do elemento individualmente. Os valores são interpretados em sentido horário, começando pela parte de cima:

Diagram: CSS padding property with top, right, bottom, and left values highlighted

Vamos tentar remover o preenchimento direito de 10px da regra anterior. Isso deve nos mostrar 20 pixels na parte superior e inferior de cada parágrafo, e 10 pixels no lado esquerdo, mas nada no lado direito:

p {
  padding: 20px 0 20px 10px;  /* Superior Direita Inferior Esquerda */
}

Independente se você usar ou não formatos abreviados, é em grande parte uma preferência pessoal ou convenção entre a equipe. Alguns desenvolvedores gostam do fato de as abreviaturas serem mais concisas, enquanto outros acham que o formato explícito é mais fácil de entender quando fizer uma leitura rápida do código (e é mais fácil de manter). Tanto faz, você irá encontrar todos esses formatos em algum ponto da sua carreira de desenvovedor web.

Bordas

Continuando nossa jornada para a parte externa a partir do centro do modelo de caixa CSS, temos a borda: uma linha desenhada no contorno do conteúdo e do preenchimento de um elemento. No caso da borda temos uma nova sintaxe que nunca foi apresentada, primeiro nós definimos a largura da borda, depois o estilo e por último sua cor.

Diagram: CSS border property showing size, style, and color syntax

Tente adicionar uma borda no entorno do nosso cabeçalho <h1> atualizando a regra no arquivo box-styles.css:

h1 {
  padding: 50px;
  border: 1px solid #5D6063;
}

Isso vai dizer ao navegador par desenhar uma linha bem fina em cinza em volta do cabeçalho. Perceba como a borda salta para a direita próximo do preenchimento sem espaço entre eles. E, se você diminuir a janela do seu navegador o suficiente para o cabeçalho se dividir em duas linhas, verá que o preenchimento e a borda continuarão iguais.

Desenhar uma borda ao redor do nosso cabeçalho faz página parecer uma página dos anos 90, então que tal nós limitarmos a parte superior do cabeçalho? Assim como o preenchimento, a propriedade border também tem as variações -top, -bottom, -left, e -right:

border-bottom: 1px solid #5D6063;

As bordas são elementos muito comuns, mas também não tem valor para depuração. Quando você não tem certeza como uma caixa está sendo apresentada, adicione uma declaração border: 1px solid red; a regra. Isso irá mostrar o preencheimento e a margem da caixa, e sua dimensão, com uma simples linha da CSS. Depois que você visualizar porque seu layout está quebrado, é só apagar a linha.

Se quiser saber mais sobre os estilos que podemos aplicar à bordas, dá uma olhada na página da MDN sobre estilos de bordas

Margens

As margens definem os espaços de fora da borda de um elemento. Ou melhor, o espaço entre a caixa e as caixas ao redor. Vamos adicionar um elemento algum espaço para cada elemento <p>:

p {
  padding: 20px 0 20px 10px;
  margin-bottom: 50px;          /* Adicione isso */
}

Isso demonstra uma variação específica da propriedade margin, mas também aceita os mesmos formatos abreviados como no padding.

Margens e preenchimentos podem alcançar a mesma coisa em diferentes situações, tornando difícil determinar qual deles é o jeito “certo” de fazer. As razões mais comum de você escolher um ao invés de outro são:

O preenchimento de uma caixa tem um fundo, enquanto as margens são sempre transparente.
O preenchimento está incluso na área do clique de um elemento, enquanto margens não estão.
As margens colapsam verticalmente, enquanto preenchimentos não (vamos discutir mais sobre isso na próxima seção).

Se nenhum dessas te ajudar a decidir se usa padding ao invés de margin, não se preocupe sobre isso—só escolha um. Em CSS, existem mais de uma forma de resolver seus problemas.

Margens em Elemento de Linha

Um dos contrastes entre elementos de blocos e elementos de linha é que um manipula as margens. Caixas de elementos de linha ignoram completamente as margens superior e inferior. Por exemplo, veja o que acontece quando adicionamos uma margem grande ao elemento <strong>:

strong {
  margin: 50px;
}

A margem horizontal é apresentada como esperada, mas isso não altera um bit do espaço vertical ao redor do nosso elemento <strong>

Web page demonstrating lack of vertical margins on inline boxes

Agora se mudarmos de margem para preenchimento, vamos descobrir que isso não é exatamente o caso de um preenchimento de caixa. Irá mostrar o fundo azul; no entanto, não irá afetar o leiaoute vertical ao redor das caixas.

Web page demonstrating vertical padding on inline boxes

A justificativa por trás disso remonta ao fato de que o formato de caixas de linha é composto por texto dentro de um bloco e, portanto, têm impacto limitado no layout geral de uma página. Se você quiser brincar com os espaços verticais de uma página, você deve trabalhar com elementos de bloco (por sorte, nós já sabemos como mudar um tipo de caixa de elemento).

Então, antes de você começar a bater sua cabeça na parede tentando descobrir porque sua margem superior ou inferior não está funcionando, lembre de verificar a propriedade display. Confia, isso irá eventualmente acontecer com você.

Margem Vertical Agrupada

Outra peculiaridade do modelo de caixa CSS é a “margem vertical agrupada”. Quando temos duas caixas com margens verticais próximas uma da outra, elas vão se agrupar (ficar uma sobre a outra). Ao invés de apresentar as margens juntas como esperado, somente a maior é apresentada.

Por exemplo, vamos adicionar uma margem superior de 25 pixels ao nosso elemento <p>:

p {
  padding: 20px 0 20px 10px;

  margin-top: 25px;
  margin-bottom: 50px;
}

Cada parágrafo deve ter 50 pixels na parte de inferior e 25 pixels na parte de superior. Isso deveria ter 75 pixels entre os elementos <p>, certo? Errado! Teremos somente 50 pixels entre eles porque a margem superior vai se agrupar com o maior inferior.

Diagram: comparison of an uncollapsed vertical margin with a collapsed vertical margin

Esse comportamento pode ser muito útil quando você está trabalhando com diferentes tipos de elementos, e você quer definir seu leiaoute como o espaço mínimo entre outros elementos.

Prevenindo Agrupamento de Margens

Isso pode ser realmente muito chato. Algumas vezes você quer prevenir a margem de se agruparem. Tudo que você precisa para fazer isso é só colocar outro elemento invisível entre elas:

<p>Parágrafos são blocos, também. <em>No entanto</em>, &lt;em&gt; e &lt;strong&gt;
elementos não. Eles são <strong>elementos</strong> de linha.</p>

<div style='padding-top: 1px'></div>  <!-- Adicione isso -->

<p>Elementos de bloco definem o fluxo do documento HTML, enquanto elementos de linha não 
são.</p>

Vamos conversar mais sobre o elemento <div> na próxima seção. A parte importante aqui é que somente os elementos consecutivos podem ser agrupados um dentro do outro. Definir um elemento com altura com algum valor (daí o padding-top) entre nossos parágrafos força-os a mostrar a margem superior com 25px e a margem inferior 50px.

Diagram: inserting an empty <div> to force vertical margins to uncollapsed

Lembre-se que o preenchimento nunca vai agrupar, então uma solução alternativa seria utilizar o padding para aumentar o espaço dos parágrafos ao invés da propriedade margin. No entanto, isso só vai funcionar se você não utilizar o preenchimento para qualquer outra coisa (no momento, nós estamos, então vamos usar o <div> como opção).

Uma terceira opção para evitar o agrupamento das margens é para usar uma convenção de margem somente superior ou somente inferior. Por exemplo, se todos os seus elementos somente definem uma margem inferior, não tem potencial para eles agruparem.

Finalmente, o esquema de layout flexbox não tem margens agrupando, então essa não é realmente um problema para páginas modernas.

Caixas Genéricas

Até agora, todo elemento HTML que vimos empresta algum significado adicional para o conteúdo que ele contém. De fato, esse é o ponto principal da HTML, mas muitas vezes quando precisamos de uma caixa genérica somente para o caso de estilizar uma página web. É para isso que o <div> e <span> são utilizados.

Ambos, <div> e <span> são elementos “conteiner” que não tem nenhum efeito semântico na estrutura de um documento HTML. Ele fazem, no entanto, uma forma de gancho para adicionar estilos CSS para uma seção arbitrária de uma página web. Por exemplo, algumas vezes você precisa adicionar uma caixa invisível para prevenir que margens se agrupem, ou talvez você queira estilizar os primeiros parágrafos de um artigo como uma sinopse com uma formatação diferentes no texto.

Vamos utilizar muitas <div> durante o resto desse tutorial. Mas agora, vamos criar um simples botão adicionando o trecho abaixo para o botão no nosso arquivo boxes.html:

<div>Botão</div>

E aqui segue o estilo associado que é necessário e vai dentro do box-styles.css. A maior parte disso deve já deve ser familiar, do último capítulo, no entanto vamos adicionar uma nova propriedade border-radius:

div {
  color: #FFF;
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
}

Isso vai nos dar um grande botão azul que ocupará toda a largura do navegador:

Web page using <div> elements for buttons

É claro, essa estilização também será aplicada à <div> invisível que usamos para quebrar o agrupamento de margem na seção anterior. Obviamente que vamos precisar de uma forma para selecionar de forma individual a <div> para que ela tenha algum uso prático para nós. Para isso vamos usar seletores de classes, que iremos introduzir no próximo capítulo. No lugar desses, vamos só excluir ou comentar aquela <div> invisível.

A única diferença real entre uma <div> e um <span> é que a primeira é para conteúdos a nível de bloco, enquanto o segundo é para conteúdo a nível de linha.

Dimensões Explicitas

Até agora, deixamos que nossos elementos HTML definissem suas próprias dimensões, de forma automática. Os preenchimentos, bordas e margens que usamos estão envolvendo todo o conteúdo que estão dentro da caixa do elemento. Se você adicionar mais texto ao nosso elemento <em>, tudo irá se expandir para acomodá-lo:

Web page showing an <em> element expanding as more content is added

Mas, algumas vezes desejamos que os layouts tenham uma dimensão explícia, como uma barra lateral que tem uma largura exata de 250 pixels. Para isso, a CSS disponibilizar as propriedades width e height. Elas tem precedência sobre o tamanho padrão do conteúdo da caixa.

Vamos dar ao nosso botão uma largura explícita adicionando a a propriedade ao box-styles.css:

div {
  /* [Declarações anteriores..] */
  width: 200px;
}

Ao invés de ocupar todo o tamanho da janela do navegador, nosso botão tem agora 200 pixels, e está posicionado no lado esquerdo da nossa página:

Web page showing an explicit CSS width property on a button

Também perceba que se você deixaar o título do botão um pouco maior, ele vai quebrar o texto automaticamente para a próxima linha, e o elemento irá expandir verticalmente para acomodar o conteúdo. Você pode mudar esse comportamento adicionando as seguintes propriedades white-space e overflow.

Caixas de Conteúdo e Caixas de Borda

As propriedades width e height só definem o tamanho do conteúdo da caixa. Seus preenchimentos e bordas são adicionar sobre qualquer dimensão explícita que você defina. Isso explica por que você tem uma imagem de 244 pixels quando você tira captura de tela do nosso botão, mesmo que ele tenha sido declarado um tamanho de width: 200px.

Diagram: content-box measurements adding padding and border to width of the element

É necessário dizer, isso pode ser um pouco contraintuitivo quando você tá tentando desenhar uma página. Imagine se você quiser preencher um conteiner de 600px com três caixas iguais com width: 200px, mas elas não encaixam porque todas tem uma borda de 1px (fazendo seu tamanho real ficar com 202px).

Felizmente, a CSS deixa você mudar como a largura de uma caixa é calculado usando a propriedade box-sizing. Por padrão, ela tem o valor da content-box, que leva ao comportamento descrito anteriormente. Vamos ver o que acontece quando mudamos para border-box:

div {
  color: #FFF;
  background-color: #5995DA;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  border: 2px solid #5D6063;
  border-radius: 5px;
  
  width: 200px;
  box-sizing: border-box;  /* Adicione isto */
}

Isso força que a largura atual da caixa seja 200px—incluindo o preenchimento e a borda. É claro, isso significa que agora a largura do conteúdo é determinado de forma automática:

Diagram: border-box measurements including padding and border with the width of the element

Isso é muito mais intuitivo, e como resultado, utilizar a border-box para todas as caixas é considerado a melhor prática entre os desenvolvedores web modernos.

Alinhando Caixas

O alinhamento de caixas horizontalmente é uma tarefa bem comum para desenvolvedores web, e o modelo de caixa oferece várias formas de fazer isso. Já vimos a propriedade text-align, que alinha o conteúdo e caixas de linha dentro de um elemento de nível de bloco. Alinhar caixas de bloco é ooooutra história...

Tente adicionar a regra abaixo a nossa folha de estilo. Isso só irá alinhar o conteúdo dentro da nossa caixa de blocos—não o bloco em si. Nossa <div> do botão continuará alinhado à esquerda independente do alinhamento do texto no <body>:

body {
  text-align: center;
}

Existem três métodos para alinhamentos horizontais de elementos de nível de bloco: “auto-margins” para alinhar no centro, “floats” para alinhar à esquerda/direita, e “flexbox” para um controle completo sobre o alinhamento. Sim, infelizmente o alinhamento de nível de bloco é totalmente desrelacionado a propriedade text-align.

Centralizando Com Auto-Margins

Floats e flexbox são tópicos complicados que iremos reservar um capítulo inteiro para isso, mas nós temos os subsídios para lidar com o auto-margins agora. Quando você define a margem esquerda ou direita par um elemento de bloco com o auto, ele irá centralizar o bloco e seus elementos.

Por exemplo, podemos centralizar nosso botão com o seguinte código:

div {
  color: #FFF;
  background-color: #4A90E2;
  font-weight: bold;
  padding: 20px;
  text-align: center;

  width: 200px;
  box-sizing: border-box;
  margin: 20px auto; /* Vertical  Horizontal */
}

Note que isso só funcionar em bloco que tem uma largura explícita definida. Se remover aquela linha width: 200px nosso botão irá ocupar de novo toda a largura da janela do navegador fazendo o “alinhamento centralizado” algo sem sentido.

Redefinindo Estilos

Sabe aquela borda branca ao redor da nossa página? Ela é uma margem/preenchimento padrão adicionada pelo seu navegador. Navegadores diferentes tem padrões de estilos diferentes para cada um dos seus elementos HTML, tornando difícil criar folhas de estilos consistentes.

One web page showing white border due to default margin/padding and another web page without the white border after a universal reset

Normalmente é uma boa ideia sobreescrever estilos padrões para um valor previsível usando o seletor CSS “universal” (*). Tente adicionar isso na primeira linha do nosso arquivo box-styles.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Esse seletor casa com todo elemento HTML, redefinindo efetivamente as propriedades margin e padding para a nossa página. Também convertemos todas as nossas caixas para border-box, o que é, de novo, uma boa prática.

Você encontrará uma redefinição na primeira linha de quase todas as folhas de estilos CSS na Web. Elas podem ser muito mais complicadas, mas as três declarações mais simples mostradas abaixo nos permitem ajustar com confiança o modelo de caixa CSS para os nossos propósitos sem se preocupar sobre interações imprevistas com os estilos padrões do navegador.

Resumo

Vamos aprender mais sobre o uso prático do modelo de caixa CSS enquanto nos aprofundamos na complexa construção de páginas web. Por enquanto, pense nisso como uma nova ferramenta na sua caixa de ferramentas. Com alguns conceitos chave apresentados nesse capítulo, você vai se sentir muito mais habilitado para converter uma imagem modelo em uma página web real:

Tudo é uma caixa.
Caixas podem ser de linha ou de bloco.
Caixas tem conteúdo, preenchimento, bordas e margens.
Elas também tem regras aparentemente arbitrárias de como interagir.
Dominando o modelo de caixas CSS você já pode projetar páginas web.

Assim como no nosso último capítulo, as propriedades CSS que cobrimos agora, podem parecer simples—e elas meio que são. Mas, comece a olhar as páginas que você visita através das lentes do modelo de caixa CSS, e você verá essas coisas literalmente em todos os lugares.

Nossa explicação sobre caixas genéricas (<div> e <span>) foi um pouco limitada por que não tínhamos ainda um jeito de descolar um elemento HTML da nossa página web. Vamos corrigir isso no próximo capítulo com uma discussão mais profunda sobre seletores CSS.

Próximo Capítulo >