Modelo de caixa: margem interna do CSS

O espaçamento interno dos elementos está entre a borda e a área de conteúdo. O atributo mais simples para controlar essa área é a propriedade padding.

A propriedade padding em CSS define o espaço branco entre a borda de um elemento e o conteúdo do elemento.}

Propriedade de padding CSS

A propriedade padding em CSS define o espaçamento interno de um elemento. A propriedade padding aceita valores de comprimento ou porcentagem, mas não permite valores negativos.

Por exemplo, se você quiser que todos os elementos h1 tenham 10 pixels de espaçamento interno em todas as laterais, basta fazer assim:

h1 {padding: 10px;}

Você também pode definir o espaçamento interno de cada lado em ordem superior, direito, inferior e esquerdo, e cada lado pode usar diferentes unidades ou valores percentuais:

h1 {padding: 10px 0.25em 2ex 20%;}

Propriedades de espaçamento interno unilaterais

Também pode definir o espaçamento interno superior, direito, inferior e esquerdo usando as seguintes quatro propriedades individuais:

Como você pode imaginar, a regra a seguir tem o mesmo efeito que a regra abreviada acima:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Valores percentuais de espaçamento interno

Como mencionado anteriormente, pode-se definir valores percentuais para o espaçamento interno de um elemento. Os valores percentuais são calculados em relação à largura do elemento pai, o que é semelhante ao margem. Portanto, se a largura do elemento pai mudar, eles também mudarão.

Abaixo está a regra que define o espaçamento interno do parágrafo como 10% da largura do elemento pai:

p {padding: 10%;}

Por exemplo: se o elemento pai de um parágrafo é um elemento div, então o espaçamento interno deve ser calculado com base na largura do div.

<div style="width: 200px;">
<p>Este parágrafo está contido dentro de um DIV que tem uma largura de 200 pixels.</p>
</div>

Atenção:O espaçamento interno superior e inferior é igual ao espaçamento interno esquerdo e direito; ou seja, a porcentagem do espaçamento interno superior e inferior é definida em relação à largura do elemento pai, não em relação à altura.

Exemplo de espaçamento interno em CSS:

Todas as propriedades de espaçamento interno em uma declaração
Este exemplo demonstra como usar a propriedade abreviada para definir todas as propriedades de espaçamento interno em uma declaração, que pode ter de um a quatro valores.
Definir espaçamento interno inferior 1
Este exemplo demonstra como usar o valor em centímetros para definir o espaçamento interno inferior da célula.
Definir espaçamento interno inferior 2
Este exemplo demonstra como usar a porcentagem para definir o espaçamento interno inferior da célula.
Definir espaçamento interno esquerdo 1
Este exemplo demonstra como usar o valor em centímetros para definir o espaçamento interno esquerdo da célula.
Definir espaçamento interno esquerdo 2
Este exemplo demonstra como usar a porcentagem para definir o espaçamento interno esquerdo da célula.
Definir margem interna direita 1
Este exemplo demonstra como usar valores em centímetros para definir a margem interna direita da célula.
Definir margem interna direita 2
Este exemplo demonstra como usar porcentagens para definir a margem interna direita da célula.
Definir margem interna superior 1
Este exemplo demonstra como usar valores em centímetros para definir a margem interna superior da célula.
Definir margem interna superior 2
Este exemplo demonstra como usar porcentagens para definir a margem interna superior da célula.

Propriedade de margem interna CSS

Propriedade Descrição
padding Propriedade abreviada. Sua função é definir as propriedades de margem interna do elemento em uma declaração.
padding-bottom Definir a margem interna inferior do elemento.
padding-left Definir a margem interna esquerda do elemento.
padding-right Definir a margem interna direita do elemento.
padding-top Definir a margem interna superior do elemento.