Aula 06 de 10

Box Model

Por que os elementos empurram uns aos outros — e como controlar isso com margin, padding, border e width.

margin padding border width / height border-radius

// entendendo

Como funciona

Todo elemento HTML é uma caixa. Essa caixa tem quatro camadas de fora para dentro:

margin — espaço fora da caixa (entre ela e os outros elementos)
border — a borda da caixa
padding — espaço entre a borda e o conteúdo, dentro da caixa
content — o texto ou imagem em si

A diferença fundamental: padding tem o fundo da caixa. margin não.

.card {
  width: 300px;
  padding: 20px;
  margin: 16px auto;   /* auto centraliza */
  border: 2px solid #333;
  border-radius: 8px;
  background: #f9f9f9;
}

// mão na massa

Agora é com você

Padding vs. margin

Crie dois <div>: um com classe caixa-a e outro com caixa-b. Dê a caixa-a um padding: 20px e fundo azul claro. Dê a caixa-b um margin: 30px e fundo verde claro. Veja a diferença no preview.

a6e1.html

<style>
  .caixa-a {
    /* padding e background aqui */
  }
  .caixa-b {
    /* margin e background aqui */
  }
</style>

<div class="caixa-a">Caixa com padding</div>
<div class="caixa-b">Caixa com margin</div>

Preciso de uma dica

.caixa-a { padding: 20px; background: #e0f2fe; } e .caixa-b { margin: 30px; background: #dcfce7; }

Observação: Percebeu? O padding "incha" a caixa por dentro. O margin empurra as outras caixas para longe. São coisas diferentes.

Card com borda

Monte um card com width: 280px, padding, borda arredondada (border-radius), sombra (box-shadow) e texto dentro. Centralize usando margin: 20px auto.

a6e2.html

<style>
  .card {
    /* width, padding, border, border-radius, box-shadow, margin */
  }
</style>

<div class="card">
  <h2>Meu Card</h2>
  <p>Conteúdo do card aqui.</p>
</div>

Preciso de uma dica

width: 280px; padding: 20px; border: 1px solid #ddd; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.1); margin: 20px auto;

Três caixas coloridas

Crie três <div>, cada um com uma cor diferente, width: 100px, height: 100px, margin: 8px e border-radius: 8px.

a6e3.html

<style>
  div {
    width: 100px;
    height: 100px;
    margin: 8px;
    border-radius: 8px;
    /* display: inline-block; descomente para ficar lado a lado */
  }
  .vermelho { background: tomato; }
  .verde { background: mediumseagreen; }
  .azul { background: cornflowerblue; }
</style>

<div class="vermelho"></div>
<div class="verde"></div>
<div class="azul"></div>

Observação: Por padrão os <div> são block — ocupam a linha inteira. Ao adicionar display: inline-block eles ficam lado a lado. Na próxima aula você vai aprender o Flexbox, que faz isso de forma muito mais poderosa.

// desafio

card de perfil

Monte um card de perfil com: imagem redonda (use border-radius: 50%), nome, cargo em texto menor e cinza, e um botão "Ver perfil". Capriche no espaçamento.

a6d1.html DESAFIO

<style>
  /* seu CSS aqui */
</style>

<!-- seu HTML aqui -->
<!-- dica: use https://placecats.com/100/100 como foto -->

Aula 05 Aula 07