Como implementar preenchimento em CSS com exemplos



Este artigo fornecerá a você um conhecimento detalhado e abrangente sobre como implementar o preenchimento em CSS com exemplos.

O preenchimento é um dos aspectos mais importantes da e . Neste artigo, discutiremos a importância e o uso de Padding em CSS na seguinte ordem:

O que é preenchimento em CSS?

A propriedade padding permite especificar onde especificar e quanto espaço deve aparecer entre o texto do conteúdo de um elemento e sua borda. O valor deste atributo deve ser um comprimento ou uma porcentagem, ou a palavra.





Padding-in-CSS



Se o valor for herdado, será o mesmo preenchimento do pai. Aqui, se a porcentagem for usada, a porcentagem é da caixa que contém.

Propriedades de preenchimento

As seguintes propriedades de Padding em CSS podem ser usadas para controlar listas. Ainda assim, você também pode definir valores diferentes para o preenchimento em qualquer um dos lados da caixa, principalmente usando as seguintes propriedades:

  • Fundo acolchoado: ele especifica o preenchimento inferior de um elemento.



  • Tampo de enchimento: Ele especifica o preenchimento superior de um elemento.

  • Preenchimento esquerdo: Ele especifica o preenchimento esquerdo do elemento.

  • Padding-right: Ele especifica o preenchimento correto do elemento.

  • Preenchimento: Isso serve como uma abreviatura para outras propriedades.

A propriedade Padding-bottom:

Isso é definido para o preenchimento inferior de um elemento. Pode levar os valores em comprimento ou porcentagem.


Este é o preenchimento inferior do parágrafo especificado



Este é outro parágrafo especificado preenchimento inferior em porcentagem

Resultado:

A Propriedade Padding-top

Esta propriedade padding-top definirá o preenchimento superior de um elemento. Isso pode assumir valores em comprimento ou porcentagem.


Este é o preenchimento superior do parágrafo especificado



Este é outro parágrafo especificado com preenchimento superior em porcentagem

Resultado:

A propriedade Padding-left

Esta propriedade padding-left irá definir o padding esquerdo de um elemento. Pode assumir valores em comprimento ou porcentagem.


Este é o preenchimento esquerdo do parágrafo especificado



Este é outro parágrafo especificado com preenchimento esquerdo em porcentagem

Resultado:

A propriedade padding-right

Esta propriedade padding-right definirá o preenchimento correto de um elemento. Pode assumir valores em comprimento ou porcentagem.


Este é o preenchimento correto do parágrafo especificado



Este é outro parágrafo especificado preenchimento correto em porcentagem

Resultado:

A Propriedade Padding

Esta propriedade de preenchimento define o preenchimento direito, esquerdo, superior e inferior. Isso pode levar os valores em comprimento ou porcentagem.

é um tem um java


Todos esses quatro preenchimentos terão 20 px



O preenchimento superior e inferior será de 20 px, o direito e o esquerdo serão de 10% da largura total do documento



O preenchimento superior e inferior será de 20px, o preenchimento direito será de 3% da largura total do documento, o preenchimento inferior e superior será de 20px

Resultado:

Com isso, chegamos ao final deste incrível artigo sobre Padding em CSS. Espero que você tenha entendido as várias maneiras de adicionar preenchimento.

Se você estiver interessado em aprender mais sobre desenvolvimento web, confira o por Edureka. O Treinamento de Certificação de Desenvolvimento da Web o ajudará a aprender como criar sites impressionantes usando HTML5, CSS3, Twitter Bootstrap 3, jQuery e APIs do Google e implantá-lo no Amazon Simple Storage Service (S3).

Se você ainda estiver interessado Se você tiver alguma dúvida, pode postá-la na seção de comentários deste blog “Padding in CSS” e entraremos em contato com você o mais breve possível.