🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS: Adicionar caixa com borda border: 1px solid #ccc; padding: 10px;

📝 Uso

Este template demonstra como criar uma caixa com borda e preenchimento usando as propriedades CSS border: 1px solid #ccc; e padding: 10px;.

📘 Explicação

O código CSS acima usa border: 1px solid #ccc; para adicionar uma borda e padding: 10px; para adicionar preenchimento dentro da caixa. Também é definida a largura e a margem para centralizar a caixa na página.

🔹 Código Parcial

Esta caixa tem borda e preenchimento aplicados.

<div class="demo-area">
  <p>Esta caixa tem borda e preenchimento aplicados.</p>
</div>

<style>
  .demo-area {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    width: 300px;
    margin: 20px auto;
  }
</style>

💻 Código HTML Completo

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adicionar caixa com borda border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>Esta caixa tem borda e preenchimento aplicados.</p>
  </div>
</body>
</html>

💻 Código Completo Funcional

<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>CSS: Adicionar caixa com borda border: 1px solid #ccc; padding: 10px;</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .demo-area {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      width: 300px;
      margin: 20px auto;
    }
  </style>
</head>
<body>
  <div class="demo-area">
    <p>Esta caixa tem borda e preenchimento aplicados.</p>
  </div>
</body>
</html>
Copiado!

📌 Técnicas Práticas para Caixas com Borda

Caixas simples com bordas são elementos básicos no design web e podem ser utilizadas em diversas situações. A combinação de border com padding é ideal para separar visualmente o conteúdo e adicionar um espaçamento confortável.

🎨 Variações de Design

Alterar o estilo da borda pode criar impressões completamente diferentes. Use border: 2px dashed #999; para borda tracejada ou border: 3px double #333; para borda dupla. Também é possível adicionar border-radius: 8px; para cantos arredondados e um visual mais suave.

📱 Dicas para Design Responsivo

Para melhorar a visualização em dispositivos móveis, é recomendado reduzir o padding, como em padding: 5px;. Com media queries, você pode ajustar o layout, por exemplo: @media (max-width: 768px) { .demo-area { width: 90%; padding: 8px; } }, tornando a caixa mais legível em telas pequenas.

As caixas com borda são úteis para exibir avisos, informações adicionais, agrupamentos de campos em formulários e destaques de características de produtos. Para destacá-las ainda mais, adicione uma cor de fundo como background-color: #f9f9f9;.

É importante manter um estilo de borda consistente em todo o site. Unificar cor, espessura e o uso de cantos arredondados transmite uma aparência mais profissional. Para dar profundidade, combine com box-shadow: 0 2px 4px rgba(0,0,0,0.1);, criando um efeito mais destacado.

Modelos Relacionados