Como usar padding para controlar o espaço interno entre o conteúdo e a borda de um elemento
A propriedade padding define o espaço interno de um elemento, entre o seu conteúdo e a sua borda.
Carregando...O texto dentro do div ficará afastado 20px da borda em todos os lados.
Assim como a margin, você pode definir padding diferentes para cada lado.
Carregando...A propriedade padding segue a mesma lógica de valores da margin: cima, direita, baixo, esquerda.
Carregando...Por padrão, o padding é somado à largura e altura do elemento. Um elemento com width: 200px e padding: 20px vai ocupar 240px de largura no total.
Para evitar isso, use box-sizing: border-box. Com ele, o padding passa a ser descontado de dentro da largura definida.
Carregando...Muitos projetos aplicam box-sizing: border-box em todos os elementos logo no início, evitando surpresas de layout:
Carregando...Confundir os dois é comum no começo. A diferença é simples:
O plano de fundo de um elemento cobre o padding, mas não cobre a margin.
Carregando...