EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Box Model e Display no Tailwind CSS: Espaçamento, Dimensionamento e Exibição

Sistema de Espaçamento com Padding

Padding controla o espaço entre o conteúdo de um elemento e sua borda. O Tailwind oferece um sistema completo de espaçamento de p-0 a p-96, usando múltiplos de 4px como padrão.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração do Sistema de Espaçamento com Padding</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Padding direcional -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Padding Direcional</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-blue-100 p-4 rounded text-center">
          <div class="bg-blue-500 text-white p-2 rounded">p-4</div>
          <span class="text-sm text-gray-600 mt-2 block">Todos os lados iguais</span>
        </div>
        <div class="bg-green-100 px-6 py-4 rounded text-center">
          <div class="bg-green-500 text-white p-2 rounded">px-6 py-4</div>
          <span class="text-sm text-gray-600 mt-2 block">Horizontal/Vertical</span>
        </div>
        <div class="bg-purple-100 pt-4 pb-2 px-4 rounded text-center">
          <div class="bg-purple-500 text-white p-2 rounded">pt-4 pb-2</div>
          <span class="text-sm text-gray-600 mt-2 block">Topo/Base diferentes</span>
        </div>
        <div class="bg-orange-100 pl-8 pr-4 py-4 rounded text-center">
          <div class="bg-orange-500 text-white p-2 rounded">pl-8 pr-4</div>
          <span class="text-sm text-gray-600 mt-2 block">Esquerda/Direita diferentes</span>
        </div>
      </div>
    </div>

    <!-- Valores comuns de padding -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Valores Comuns de Padding</h3>
      <div class="space-y-4">
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-1 w-32 text-center text-sm">p-1 (4px)</div>
          <div class="bg-gray-200 p-2 w-32 text-center text-sm">p-2 (8px)</div>
          <div class="bg-gray-200 p-3 w-32 text-center text-sm">p-3 (12px)</div>
          <div class="bg-gray-200 p-4 w-32 text-center text-sm">p-4 (16px)</div>
        </div>
        <div class="flex items-center gap-4">
          <div class="bg-gray-200 p-5 w-32 text-center text-sm">p-5 (20px)</div>
          <div class="bg-gray-200 p-6 w-32 text-center text-sm">p-6 (24px)</div>
          <div class="bg-gray-200 p-8 w-32 text-center text-sm">p-8 (32px)</div>
          <div class="bg-gray-200 p-10 w-32 text-center text-sm">p-10 (40px)</div>
        </div>
      </div>
    </div>

    <!-- Valores arbitrários -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Padding com Valores Arbitrários</h3>
      <div class="flex gap-4">
        <div class="bg-blue-100 p-[15px] rounded text-center">p-[15px]</div>
        <div class="bg-green-100 p-[2rem] rounded text-center">p-[2rem]</div>
        <div class="bg-purple-100 p-[5%] rounded text-center">p-[5%]</div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de direção do padding:

Classe Propriedade CSS Descrição
p-4 padding: 16px Todos os lados iguais
px-4 padding-left/right: 16px Horizontal
py-4 padding-top/bottom: 16px Vertical
pt-4 padding-top: 16px Topo
pr-4 padding-right: 16px Direita
pb-4 padding-bottom: 16px Base
pl-4 padding-left: 16px Esquerda

CSS Tradicional vs Tailwind A abordagem tradicional exige definir valores específicos de padding para cada elemento, enquanto o Tailwind utiliza um sistema de espaçamento predefinido baseado em múltiplos de 4px para manter a consistência do design.

Sistema de Espaçamento com Margin

Margin controla o espaço entre um elemento e outros elementos. A sintaxe é semelhante ao Padding, com suporte adicional para centralização automática.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração do Sistema de Espaçamento com Margin</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Margin básica -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Margin Básica</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 m-4 rounded">m-4 todos os lados iguais</div>
        <div class="bg-green-500 text-white p-4 mx-8 my-4 rounded">mx-8 my-4</div>
        <div class="bg-purple-500 text-white p-4 mt-8 mb-2 ml-4 mr-6 rounded">
          mt-8 mb-2 ml-4 mr-6
        </div>
      </div>
    </div>

    <!-- Centralização automática -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Centralização com mx-auto</h3>
      <div class="bg-gray-200 p-4">
        <div class="bg-blue-500 text-white p-4 w-64 mx-auto rounded text-center">
          mx-auto centralizado
        </div>
      </div>
    </div>

    <!-- Margin negativa -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Margin Negativa</h3>
      <div class="bg-gray-200 p-8">
        <div class="bg-red-500 text-white p-4 -mt-4 -ml-4 rounded">
          -mt-4 -ml-4 margin negativa
        </div>
      </div>
    </div>

    <!-- Comparação margin vs padding -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Padding (Espaçamento Interno)</h3>
        <div class="border-2 border-dashed border-blue-300">
          <div class="bg-blue-100 p-6">
            <div class="bg-blue-500 text-white p-4 rounded text-center">
              Área de conteúdo
            </div>
          </div>
        </div>
      </div>
      
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">Margin (Espaçamento Externo)</h3>
        <div class="border-2 border-dashed border-green-300 p-6">
          <div class="bg-green-500 text-white p-4 rounded text-center m-4">
            Área de conteúdo
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige definir valores de margin individualmente para cada elemento, enquanto o Tailwind utiliza mx-auto para centralização e -mt-4 para margens negativas com uma sintaxe mais intuitiva.

💡 Dica: A margin negativa usa o prefixo -, como -m-4 e -mt-2, comumente usado para layouts sobrepostos e ajuste de posição de elementos.

Sistema de Dimensionamento de Largura/Altura

O Tailwind oferece uma ampla variedade classes de dimensionamento, incluindo tamanhos predefinidos e valores arbitrários, com suporte a design responsivo.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração do Sistema de Dimensionamento de Largura/Altura</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Larguras fixas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Larguras Fixas</h3>
      <div class="space-y-2">
        <div class="bg-blue-200 w-16 h-8 rounded">w-16</div>
        <div class="bg-blue-300 w-32 h-8 rounded">w-32</div>
        <div class="bg-blue-400 w-48 h-8 rounded text-white">w-48</div>
        <div class="bg-blue-500 w-64 h-8 rounded text-white">w-64</div>
        <div class="bg-blue-600 w-96 h-8 rounded text-white">w-96</div>
      </div>
    </div>

    <!-- Larguras em porcentagem -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Larguras em Porcentagem</h3>
      <div class="space-y-2">
        <div class="bg-green-200 w-1/2 h-8 rounded">w-1/2 (50%)</div>
        <div class="bg-green-300 w-1/3 h-8 rounded">w-1/3 (33,33%)</div>
        <div class="bg-green-400 w-2/3 h-8 rounded text-white">w-2/3 (66,67%)</div>
        <div class="bg-green-500 w-1/4 h-8 rounded text-white">w-1/4 (25%)</div>
        <div class="bg-green-600 w-3/4 h-8 rounded text-white">w-3/4 (75%)</div>
      </div>
    </div>

    <!-- Larguras especiais -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Larguras Especiais</h3>
      <div class="space-y-2">
        <div class="bg-purple-200 w-full h-8 rounded">w-full (100%)</div>
        <div class="bg-purple-300 w-screen h-8 rounded">w-screen (100vw)</div>
        <div class="bg-purple-400 w-min h-8 rounded text-white">w-min</div>
        <div class="bg-purple-500 w-max h-8 rounded text-white">w-max</div>
        <div class="bg-purple-600 w-fit h-8 rounded text-white">w-fit</div>
      </div>
    </div>

    <!-- Larguras mínimas/máximas -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Larguras Mínimas/Máximas</h3>
      <div class="space-y-2">
        <div class="bg-orange-200 min-w-[200px] w-32 h-8 rounded">
          min-w-[200px] w-32
        </div>
        <div class="bg-orange-300 max-w-xs h-8 rounded">
          max-w-xs
        </div>
      </div>
    </div>

    <!-- Exemplos de altura -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Alturas</h3>
      <div class="flex gap-4 items-end">
        <div class="bg-blue-500 w-16 h-16 rounded"></div>
        <div class="bg-blue-500 w-16 h-24 rounded"></div>
        <div class="bg-blue-500 w-16 h-32 rounded"></div>
        <div class="bg-blue-500 w-16 h-48 rounded"></div>
        <div class="bg-blue-500 w-16 h-64 rounded"></div>
      </div>
      <div class="mt-4 bg-gray-200 h-screen rounded">
        h-screen (100vh)
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de dimensionamento comum:

Classe Tamanho Pixels
w-1 0.25rem 4px
w-4 1rem 16px
w-8 2rem 32px
w-16 4rem 64px
w-32 8rem 128px
w-64 16rem 256px
w-96 24rem 384px

CSS Tradicional vs Tailwind A abordagem tradicional exige definir valores específicos de width e height para cada elemento, enquanto o Tailwind utiliza um sistema predefinido baseado em rem que responde automaticamente a alterações no tamanho da fonte.

Box Sizing

O Box Sizing controla como as dimensões de um elemento são calculadas, afetando se o padding e a borda são incluídos na largura e altura definidas.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração de Box Sizing</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Demonstração box-border -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-border (Padrão)</h3>
      <p class="text-gray-600 mb-4">O padding e a borda são incluídos na largura e altura definidas</p>
      <div class="bg-gray-200 p-4">
        <div class="box-border w-64 p-8 border-4 border-blue-500 bg-blue-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">Largura total = 256px</p>
        </div>
      </div>
    </div>

    <!-- Demonstração box-content -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">box-content</h3>
      <p class="text-gray-600 mb-4">O padding e a borda são adicionados fora da largura e altura definidas</p>
      <div class="bg-gray-200 p-4">
        <div class="box-content w-64 p-8 border-4 border-green-500 bg-green-100 rounded">
          <p class="text-center">w-64 + p-8 + border-4</p>
          <p class="text-center text-sm text-gray-600">Largura total = 256 + 64 + 8 = 328px</p>
        </div>
      </div>
    </div>

    <!-- Comparação -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Comparação</h3>
      <div class="grid grid-cols-2 gap-8">
        <div>
          <p class="text-center font-medium mb-2">box-border</p>
          <div class="bg-gray-200 p-4">
            <div class="box-border w-full h-32 p-4 border-4 border-blue-500 bg-blue-200 rounded flex items-center justify-center">
              Área de conteúdo menor
            </div>
          </div>
        </div>
        <div>
          <p class="text-center font-medium mb-2">box-content</p>
          <div class="bg-gray-200 p-4">
            <div class="box-content w-full h-32 p-4 border-4 border-green-500 bg-green-200 rounded flex items-center justify-center">
              Área de conteúdo maior
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

CSS Tradicional vs Tailwind A abordagem tradicional exige usar a propriedade box-sizing: border-box, enquanto o Tailwind oferece dois nomes de classes concisos: box-border e box-content.

💡 Dica: O Tailwind usa box-border como padrão (herdado do CSS reset), que é a prática recomendada para o desenvolvimento web moderno.

Propriedade Display

A propriedade Display controla como um elemento é renderizado e é a base do layout. O Tailwind oferece um conjunto completo de classes utilitárias de display.

Exemplo

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demonstração da Propriedade Display</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-100 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- block e inline -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">block vs inline</h3>
      <div class="bg-gray-200 p-4 space-y-2">
        <span class="block bg-blue-200 p-2">span - block (ocupa a linha inteira)</span>
        <span class="block bg-blue-300 p-2">span - block (ocupa a linha inteira)</span>
      </div>
      <div class="bg-gray-200 p-4 mt-4">
        <span class="inline bg-green-200 p-2">span - inline</span>
        <span class="inline bg-green-300 p-2">span - inline</span>
        <span class="inline bg-green-400 p-2">span - inline</span>
      </div>
    </div>

    <!-- inline-block -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">inline-block</h3>
      <div class="bg-gray-200 p-4">
        <span class="inline-block bg-purple-200 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-300 p-4 m-2 rounded">inline-block</span>
        <span class="inline-block bg-purple-400 p-4 m-2 rounded text-white">inline-block</span>
        <p class="text-sm text-gray-600 mt-2">Combina recursos de inline e block</p>
      </div>
    </div>

    <!-- hidden -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">hidden (Ocultar Elemento)</h3>
      <div class="bg-gray-200 p-4">
        <p>Este texto está visível</p>
        <p class="hidden">Este texto está oculto (display: none)</p>
        <p>Este texto também está visível</p>
      </div>
      <p class="text-sm text-gray-600 mt-4">
        Dica: Use hidden ou prefixos responsivos para controlar a visibilidade do elemento
      </p>
    </div>

    <!-- flex e grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">flex</h3>
        <div class="flex gap-2">
          <div class="bg-blue-200 p-4 rounded flex-1 text-center">1</div>
          <div class="bg-blue-300 p-4 rounded flex-1 text-center">2</div>
          <div class="bg-blue-400 p-4 rounded flex-1 text-center text-white">3</div>
        </div>
      </div>

      <div class="bg-white rounded-lg shadow p-6">
        <h3 class="font-semibold mb-4">grid</h3>
        <div class="grid grid-cols-3 gap-2">
          <div class="bg-green-200 p-4 rounded text-center">1</div>
          <div class="bg-green-300 p-4 rounded text-center">2</div>
          <div class="bg-green-400 p-4 rounded text-center text-white">3</div>
          <div class="bg-green-500 p-4 rounded text-center text-white">4</div>
          <div class="bg-green-600 p-4 rounded text-center text-white">5</div>
          <div class="bg-green-700 p-4 rounded text-center text-white">6</div>
        </div>
      </div>
    </div>

    <!-- Display responsivo -->
    <div class="bg-white rounded-lg shadow p-6">
      <h3 class="font-semibold mb-4">Mostrar/Ocultar Responsivo</h3>
      <div class="bg-gray-200 p-4">
        <p class="block md:hidden text-center text-red-500 font-medium">
          Visível apenas em telas pequenas (block md:hidden)
        </p>
        <p class="hidden md:block lg:hidden text-center text-blue-500 font-medium">
          Visível apenas em telas médias (hidden md:block lg:hidden)
        </p>
        <p class="hidden lg:block text-center text-green-500 font-medium">
          Visível apenas em telas grandes (hidden lg:block)
        </p>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Referência de classes de display:

Classe Valor CSS Descrição
block display: block Elemento de bloco
inline-block display: inline-block Elemento inline-block
inline display: inline Elemento inline
flex display: flex Layout flex
inline-flex display: inline-flex Layout flex inline
grid display: grid Layout grid
inline-grid display: inline-grid Layout grid inline
hidden display: none Ocultar elemento

CSS Tradicional vs Tailwind A abordagem tradicional exige definir a propriedade display no CSS, enquanto o Tailwind utiliza nomes de classes semânticos como block, flex e grid para um código mais legível.

⚠️ Nota: hidden remove completamente o elemento (display: none). Use invisible (visibility: hidden) se precisar preservar o espaço do elemento.

❓ Perguntas Frequentes

P: Em qual unidade o sistema de espaçamento do Tailwind é baseado? R: O Tailwind usa 4px como unidade base por padrão. p-1 = 4px, p-2 = 8px, p-4 = 16px, e assim por diante. Você pode personalizar a escala de espaçamento através da configuração.

P: Por que mx-auto centraliza horizontalmente? R: mx-auto define as margens esquerda e direita como auto. Quando o elemento tem uma largura fixa, o navegador calcula automaticamente margens iguais em ambos os lados, alcançando a centralização horizontal. O elemento deve ser de nível bloco.

P: Qual é a diferença entre w-full e w-screen? R: w-full = 100% da largura do elemento pai, w-screen = 100vw (largura da viewport). A largura da viewport é tipicamente usada para elementos que precisam ocupar a tela inteira.

P: Quando devo usar box-content? R: Use quando precisar que o padding e a borda sejam renderizados fora da largura e altura definidas. Na maioria dos casos, o padrão box-border produz resultados mais previsíveis.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um componente de card usando p-6 para padding, m-4 para margin, w-80 para largura e mx-auto para centralização horizontal

  2. ⭐⭐ Crie um layout de grid responsivo usando uma combinação de display: grid e display: flex, com uma coluna no mobile e duas colunas no desktop

  3. ⭐⭐⭐ Crie um layout de página completo com uma barra lateral de largura fixa (w-64) e uma área de conteúdo principal adaptativa (flex-1), usando box-border para garantir cálculos corretos de tamanho

100%