Preenchimento do CSS

A margem interna deste elemento é de 70px.

Preenchimento do CSS

CSS padding A propriedade é usada para gerar espaço ao redor do conteúdo do elemento dentro de qualquer limite definido.

Através do CSS, você pode controlar completamente a margem interna (preenchimento). Existem algumas propriedades que podem definir a margem interna de cada lado (cima, direita, baixo e esquerda) do elemento.

Padding - Lado individual

O CSS possui propriedades para especificar a margem interna de cada lado do elemento:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Todas as propriedades de margem interna podem ser configuradas com os seguintes valores:

  • length - Especifica a margem interna em unidades como px, pt, cm, etc.
  • % - Especifica a margem interna em porcentagem da largura do elemento contido
  • inherit - Especifica que a margem interna deve ser herdada do elemento pai

Dica:Não são permitidos valores negativos.

Exemplo

Defina diferentes margens internas para todos os quatro lados do elemento <div>:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Experimente você mesmo

Padding - Propriedade abreviada

Para reduzir o código, você pode especificar todos os atributos de margem interna em um único atributo.

padding O atributo é a abreviação das seguintes propriedades de espaçamento interno:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

O mecanismo de funcionamento é o seguinte:

Se padding O atributo tem quatro valores:

  • padding: 25px 50px 75px 100px;
    • O espaçamento interno superior é de 25px
    • O espaçamento interno direito é de 50px
    • O espaçamento interno inferior é de 75px
    • O espaçamento interno esquerdo é de 100px

Exemplo

Usar o atributo abreviado de preenchimento que define quatro valores:

div {
  padding: 25px 50px 75px 100px;
}

Experimente você mesmo

Se padding O atributo define três valores:

  • padding: 25px 50px 75px;
    • O espaçamento interno superior é de 25px
    • O espaçamento interno direito e esquerdo são de 50px
    • O espaçamento interno inferior é de 75px

Exemplo

Usar o atributo abreviado de preenchimento que define três valores:

div {
  padding: 25px 50px 75px;
}

Experimente você mesmo

Se padding O atributo define dois valores:

  • padding: 25px 50px;
    • O espaçamento interno superior e inferior são de 25px
    • O espaçamento interno direito e esquerdo são de 50px

Exemplo

Usar o atributo abreviado de preenchimento que define dois valores:

div {
  padding: 25px 50px;
}

Experimente você mesmo

Se padding O atributo define um valor:

  • padding: 25px;
    • Todos os quatro espaços internos são de 25px

Exemplo

Usar o atributo abreviado de preenchimento que define um valor:

div {
  padding: 25px;
}

Experimente você mesmo

Preenchimento e largura do elemento

CSS width A propriedade especifica a largura da área de conteúdo do elemento. A área de conteúdo é a parte interna do elemento (modelo de caixa) que contém o preenchimento, a borda e o espaçamento.

Portanto, se o elemento tiver uma largura especificada, o espaçamento interno adicionado ao elemento será adicionado ao total da largura do elemento. Isso geralmente não é o resultado desejado.

Exemplo

Aqui, a largura do elemento <div> é de 300px. No entanto, a largura real do elemento <div> será de 350px (300px + preenchimento esquerdo 25px + preenchimento direito 25px):

div {
  width: 300px;
  padding: 25px;
}

Experimente você mesmo

Para manter a largura em 300px, independentemente da quantidade de preenchimento, você pode usar box-sizing Propriedade. Isso fará com que o elemento mantenha sua largura. Se você aumentar o espaçamento interno, o espaço disponível para o conteúdo diminuirá.

Exemplo

Usar a propriedade box-sizing para manter a largura em 300px, independentemente da quantidade de preenchimento:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Experimente você mesmo

Mais exemplos

Definir espaçamento interno esquerdo
Este exemplo demonstra como definir o espaçamento interno esquerdo do elemento <p>.
Definir espaçamento interno direito
Este exemplo demonstra como definir o espaçamento interno direito do elemento <p>.
Definir espaçamento interno superior
Este exemplo demonstra como definir o espaçamento interno superior do elemento <p>.
Definir espaçamento interno inferior
Este exemplo demonstra como definir o espaçamento interno inferior do elemento <p>.

Todas as propriedades de espaçamento interno CSS

Propriedade Descrição
padding Atributo abreviado usado para definir todas as propriedades de espaçamento interno em uma única declaração.
padding-bottom Definir o espaçamento interno inferior do elemento.
padding-left Definir o espaçamento interno esquerdo do elemento.
padding-right Definir a margem interna direita do elemento.
padding-top Definir a margem interna superior do elemento.

Leitura adicional

Livro extraclasse:Modelo de caixa: Margem interna CSS