Se quisermos adicionar preenchimento no documento HTML usando CSS interno, teremos que seguir os passos abaixo. Usando essas etapas simples, podemos adicionar facilmente o preenchimento.

Passo 1: Primeiramente, temos que digitar o código HTML em qualquer editor de texto ou abrir o arquivo HTML existente no editor de texto no qual queremos adicionar o preenchimento.

 Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.  

Passo 2: Agora, temos que colocar o cursor na tag head logo após a tag title do documento HTML e então definir o tag conforme mostrado no bloco a seguir.

 Add the Padding in Html  

Etapa 3: Agora, temos que definir a propriedade de preenchimento naquele seletor de id que é especificado logo antes do texto ao qual queremos adicionar preenchimento.

A seguir estão as cinco propriedades diferentes a partir das quais podemos aplicar o preenchimento em cada lado:

eu. Preenchimento à esquerda:

Se quisermos aplicar apenas o preenchimento esquerdo a um elemento, teremos que usar apenas preenchimento à esquerda propriedade no seletor de id. E então temos que definir apenas um valor para a propriedade conforme mostrado no exemplo a seguir:

 Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding.  

A saída do código acima que usa a propriedade padding-left é mostrada na captura de tela a seguir:

ii. Preenchimento à direita:

Se quisermos aplicar apenas o preenchimento correto a um elemento, teremos que usar apenas preenchimento à direita propriedade no seletor de id. E então temos que definir apenas um valor para a propriedade conforme mostrado no exemplo a seguir:

 Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding.  

A saída do código acima que usa a propriedade padding-right é mostrada na captura de tela a seguir:

iii. Parte superior acolchoada:

Se quisermos aplicar apenas o preenchimento superior a um elemento, teremos que usar apenas topo acolchoado propriedade no seletor de id. E então temos que definir apenas um valor para a propriedade conforme mostrado no exemplo a seguir:

 Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding.  

A saída do código acima que usa a propriedade padding-top é mostrada na captura de tela a seguir:

4. Fundo de preenchimento:

Se quisermos aplicar apenas o preenchimento inferior a um elemento, teremos que usar apenas fundo de preenchimento propriedade no seletor de id. E então temos que definir apenas um valor para a propriedade conforme mostrado no exemplo a seguir:

 Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding.  

A saída do código acima que usa a propriedade padding-bottom é mostrada na captura de tela a seguir:

v. Preenchimento:

Se quisermos aplicar o preenchimento diferente a todos os quatro lados (superior, inferior, esquerdo, direito), teremos que especificar os quatro valores na propriedade padding.

 padding: 10px 50px 75px 200px;  

Se especificarmos os dois valores, o editor HTML aplicará o primeiro preenchimento à parte superior e inferior e o segundo preenchimento à esquerda e à direita.

 padding: 100px 50px;  

Se especificarmos apenas o valor no atributo padding, o editor HTML aplicará o mesmo preenchimento a todos os quatro lados.

 padding: 100px;  

Exemplos de propriedade de preenchimento:

Exemplo 1: O exemplo a seguir usa um valor na propriedade padding para definir o mesmo preenchimento em todos os quatro lados.

 Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side.  

A saída do exemplo 1 é mostrada na captura de tela a seguir:

Exemplo 2: O exemplo a seguir usa dois valores no preenchimento propriedade para definir o mesmo preenchimento para os lados opostos.

 Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side.  

A saída do exemplo 2 é mostrada na captura de tela a seguir:

Exemplo 3: O exemplo a seguir usa quatro valores na propriedade padding para definir o preenchimento diferente para todos os quatro lados.

 Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side.  

A saída do exemplo 3 é mostrada na captura de tela a seguir: