Demonstração Prática de Padding CSS

Este arquivo demonstra os conceitos de preenchimento (padding) e a importância da propriedade box-sizing: border-box;, conforme ensinado na aula.

1. Padding Individual vs. Shorthand

O padding cria espaço interno entre o conteúdo (texto) e a borda.

Padding Individual (Diferente em cada lado)

Conteúdo

Padding Shorthand (3 valores: Topo(20), L/R(5), Fundo(10))

Conteúdo

2. Padding e a Largura (width) do Elemento

Os dois elementos abaixo possuem uma largura (width) definida de 250px, mas seus tamanhos visíveis são diferentes devido ao box-sizing.

Comportamento Padrão: box-sizing: content-box;

Largura: 250px | Padding: 25px
Largura Total Visível: 300px (250 + 25 + 25)

Conteúdo

Solução Moderna: box-sizing: border-box;

O padding é incluído *dentro* da largura total definida, facilitando o cálculo de layout.

Largura: 300px | Padding: 20px
Largura Total Visível: 300px (O padding 'rouba' espaço do conteúdo)

Conteúdo