Box Model (O Modelo de Caixa)

A regra de ouro da Web: TODO elemento é uma caixa retangular invisível. Essa caixa tem 4 camadas exatas: 1. Content (Conteúdo): O texto ou imagem no miolo. 2. Padding (Preenchimento): É o 'algodão' por dentro da caixa. Afasta o conteúdo das bordas. 3. Border (Borda): A casca da caixa. Pode ser visível ou não. 4. Margin (Margem): O 'campo de força' por fora. Empurra as outras caixas para longe.

script.js
<style>
  .caixa-magica {
    background-color: #8A2BE2;
    color: white;
    font-family: sans-serif;
    text-align: center;
    
    /* A Mágica do Box Model: */
    padding: 30px; /* Câmera de ar interna */
    border: 5px dashed #000; /* Borda tracejada preta */
    margin: 20px; /* Empurra as paredes externas */
  }
</style>

<div class="caixa-magica">
  Sou um conteúdo protegido pelo Padding, Border e Margin!
</div>
🌐 Navegador
localhost:3000
Card 1 de 3