Modelo de Caixa CSS

Introdução

Bem-vindo ao laboratório do Modelo de Caixa CSS! No design web, cada elemento HTML pode ser considerado como uma caixa. O Modelo de Caixa CSS é um conceito fundamental que descreve como essas caixas são renderizadas em uma página web. Ele é composto por quatro partes principais: a área de conteúdo, o padding (preenchimento), a border (borda) e a margin (margem).

Neste laboratório, você aprenderá a manipular cada um desses componentes para controlar o tamanho e o espaçamento dos elementos. Trabalharemos com um arquivo index.html e um arquivo style.css. Todas as suas alterações serão feitas no arquivo style.css, e você poderá ver os resultados instantaneamente alternando para a aba Web 8080 na interface do LabEx.

Vamos começar!

Definir a propriedade width em um elemento div

Neste passo, começaremos definindo o tamanho da área de conteúdo do nosso elemento. A propriedade width em CSS define a largura da caixa de conteúdo de um elemento. Os outros componentes do modelo de caixa (padding, border, margin) serão adicionados em torno desta área de conteúdo.

Primeiro, localize o arquivo style.css no explorador de arquivos no lado esquerdo do WebIDE. Clique nele para abri-lo no editor.

Agora, adicione a seguinte regra CSS ao arquivo style.css. Esta regra tem como alvo o elemento div com a classe box e define sua largura para 300 pixels.

.box {
  width: 300px;
}

Após adicionar o código, salve o arquivo (Ctrl+S ou Cmd+S). Para ver o efeito, clique na aba Web 8080. Você notará que o texto dentro da caixa agora quebra para caber em um contêiner com 300 pixels de largura.

Aplicar a propriedade padding com valores uniformes

Neste passo, adicionaremos algum espaço entre o conteúdo e a borda do elemento. Este espaço é chamado de padding (preenchimento). A propriedade padding limpa uma área ao redor do conteúdo. Ela fica dentro da borda do elemento.

Vamos adicionar 20 pixels de padding a todos os quatro lados da nossa caixa. Modifique a regra .box existente no seu arquivo style.css para incluir a propriedade padding.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue; /* Adicionado para melhor visualização */
}

Também adicionamos uma background-color para tornar as áreas de conteúdo e padding mais visíveis. Salve o arquivo e alterne para a aba Web 8080. Você verá que agora há um espaço azul claro de 20 pixels envolvendo o conteúdo de texto dentro da caixa. Observe que a largura visível geral da caixa aumentou, pois o padding é adicionado sobre a largura do conteúdo.

Usar a propriedade border com estilo, largura e cor

Neste passo, adicionaremos uma border (borda) ao redor do padding e do conteúdo do nosso elemento. A propriedade border é um atalho que permite definir a largura, o estilo e a cor da borda de uma só vez.

Vamos adicionar uma borda sólida preta com 2 pixels de largura. Atualize a regra .box no seu arquivo style.css como mostrado abaixo:

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
}

Os valores para a propriedade border são border-width (largura da borda), border-style (estilo da borda) e border-color (cor da borda), respectivamente.

Salve o arquivo e atualize a aba Web 8080. Agora você verá uma linha preta desenhada ao redor da área de padding da caixa. A largura total do elemento aumentou novamente para acomodar esta nova borda.

Implementar a propriedade margin para espaçamento

Neste passo, controlaremos o espaço fora da borda do elemento. Isso é feito usando a propriedade margin (margem). A margem cria espaço vazio ao redor de um elemento, afastando outros elementos dele.

Vamos adicionar uma margem de 50 pixels a todos os lados da nossa caixa para criar alguma separação do título (<h1>) e das bordas da página. Adicione a propriedade margin à regra .box em style.css.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
}

Salve o arquivo e verifique a aba Web 8080. Você observará que toda a caixa agora está afastada do elemento <h1> e da borda esquerda da janela do navegador. Isso demonstra como a margem é usada para controlar o espaçamento entre os elementos.

Adicionar box-sizing border-box para incluir padding

Neste passo, abordaremos um desafio comum de layout. Por padrão, as propriedades width (largura) e height (altura) de um elemento aplicam-se apenas à caixa de conteúdo. O padding e a borda são adicionados por cima disso, o que pode tornar o dimensionamento imprevisível. Para a nossa caixa, a largura total é atualmente 300px (largura) + 40px (padding esquerdo/direito) + 4px (borda esquerda/direita) = 344px.

Para simplificar isso, podemos usar a propriedade box-sizing. Ao defini-la como border-box, dizemos ao navegador para incluir o padding e a borda dentro da largura e altura totais do elemento.

Adicione a propriedade box-sizing: border-box; à sua regra .box.

.box {
  width: 300px;
  padding: 20px;
  background-color: lightblue;
  border: 2px solid black;
  margin: 50px;
  box-sizing: border-box;
}

Salve o arquivo e observe a aba Web 8080. Você verá a caixa encolher. Agora, a largura total da caixa, incluindo padding e borda, é exatamente 300 pixels. O navegador ajusta automaticamente a área de conteúdo para se adequar. Esse comportamento é muito mais intuitivo para criar layouts.

Resumo

Parabéns por completar o laboratório! Você aprendeu com sucesso os fundamentos do Modelo de Caixa (Box Model) do CSS.

Neste laboratório, você praticou:

• Definir a width (largura) da área de conteúdo de um elemento.
• Aplicar padding para criar espaço entre o conteúdo e a borda.
• Adicionar uma border (borda) ao redor do padding e do conteúdo.
• Usar margin para criar espaço fora da borda do elemento.
• Utilizar box-sizing: border-box para um dimensionamento de elementos mais previsível e intuitivo.

Compreender o Modelo de Caixa é crucial para controlar o layout e o espaçamento dos elementos em uma página web. Continue praticando esses conceitos para se tornar proficiente em CSS.