Introdução
Nesta aula, vamos nos concentrar no Preenchimento (Padding), um componente essencial do Box Model que controla o espaçamento interno dos elementos.
1. Introdução ao Padding
Padding é o espaço interno de um elemento HTML, localizado entre o conteúdo do elemento (texto, imagem, etc.) e sua borda.
Analogia: Imagine uma caixa (o elemento). O padding é como um enchimento ou acolchoamento dentro dessa caixa, empurrando o conteúdo para longe das paredes da caixa (a borda).
Diferença de Margin: Enquanto a margin cria espaço fora da borda do elemento (afastando-o de outros elementos), o padding cria espaço dentro da borda.
2. Propriedades Individuais de Padding
É possível controlar o padding de cada lado do elemento separadamente:
padding-top: Define o preenchimento na parte superior.padding-right: Define o preenchimento no lado direito.padding-bottom: Define o preenchimento na parte inferior.padding-left: Define o preenchimento no lado esquerdo.
3. Valores Aceitos para Padding
As propriedades de padding aceitam os seguintes valores:
length: Um valor fixo com unidade (ex:pxpara pixels,ptpara pontos,cmpara centímetros,em,rem). Ex:padding-top: 10px;.percent(%): Um valor percentual relativo à largura do elemento pai (container). Ex:padding-left: 5%;.inherit: O elemento herda o valor de padding do seu elemento pai.
Importante: Padding não aceita valores negativos.
4. Propriedade Shorthand (padding)
Permite definir o padding para todos os lados em uma única declaração, economizando código. O número de valores fornecidos determina como eles são aplicados:
- 4 valores:
padding: 5px 10px 15px 20px;(Aplica 5px no topo, 10px na direita, 15px na base, 20px na esquerda – sentido horário). - 3 valores:
padding: 5px 10px 15px;(Aplica 5px no topo, 10px na direita e esquerda, 15px na base). - 2 valores:
padding: 5px 10px;(Aplica 5px no topo e base, 10px na direita e esquerda). - 1 valor:
padding: 10px;(Aplica 10px em todos os quatro lados).
5. Interação entre Padding e Largura (width)
Comportamento Padrão:
Por padrão, quando você define uma largura (width) para um elemento e adiciona padding, o padding é somado à largura total visível do elemento.
Exemplo: Um elemento com width: 100px; e padding: 10px; terá uma largura visível total de 120px (100px do conteúdo + 10px de padding esquerdo + 10px de padding direito). Isso pode “quebrar” layouts.
Solução com box-sizing: border-box;:
Propriedade: box-sizing controla como a largura e altura totais de um elemento são calculadas.
Valor border-box: Ao definir box-sizing: border-box;, você instrui o navegador a incluir o padding (e a border) dentro da largura (width) e altura (height) especificadas para o elemento.
Resultado: Usando o exemplo anterior, com width: 100px; padding: 10px; box-sizing: border-box;, a largura total visível do elemento permanecerá 100px. O espaço para o conteúdo interno será reduzido para acomodar os 10px de padding em cada lado. Isso facilita a criação de layouts previsíveis.