HTML5 - Preenchimento

O preenchimento em HTML permite gerar um espaço entre o conteúdo e as bordas da caixa que o contém, desta forma podemos dar ao elemento ar e obter efeitos gráficos interessantes.

• Tampo de acolchoamento: Inicializa o preenchimento da borda superior, suas medidas são expressas em comprimento ou em porcentagens.
• Preenchimento à direita: Inicializa o preenchimento para a borda direita, suas medidas são expressas em comprimento ou em porcentagens.
• Fundo acolchoado: Inicializa o preenchimento para a borda inferior, suas medidas são expressas em comprimento ou em porcentagens.
• Preenchimento esquerdo: Inicializa o preenchimento para a borda esquerda, suas medidas são expressas em comprimento ou em porcentagens.
• Preenchimento: Este atalho nos ajuda a fazer a inicialização do preenchimento com todas as suas bordas em uma única linha.

Algo importante que devemos limitar quando fazemos a inicialização de um preenchimento O uso de medidas de porcentagem significa que essa porcentagem só será tomada com base na largura do elemento, nunca na altura.
Vamos ver agora com um código simples como aplicar um preenchimento em nosso documento HTML5.

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Como podemos ver de este código podemos destacar cosas bastante interesantes, si nos fijamos bien, al elemento al que le hacemos padding ya le hemos aplicado otros estilos y es decir que podemos mezclar con otros elementos para obtener nuestro resultado, también podemos ver que usamos la unidade de medida em em vez de pxEmbora os dois sejam compatíveis, é uma questão que podemos ver sua versatilidade; finalmente vamos ver como fica em nosso navegador:

Agora vamos ver como aplicar o atalho para inicializar nosso preenchimento em uma única linha, para isso a ordem das medidas de preenchimento é a seguinte: Cima, Direita, Baixo, Esquerda; Além disso, quando estamos omitindo valores, o outro valor é ajustado para o não omitido, por exemplo se omitirmos a esquerda tomará o valor da direita, se omitirmos o inferior, tomaremos o valor do superior, se colocarmos apenas um valor, os quatro lados terão o mesmo valor.
Vamos demonstrar toda essa teoria com um código de prática, vamos ver como implementamos o preenchimento em uma única linha de uma forma muito simples.

 Exemplo
Existem muitos tipos diferentes de frutas - existem mais de 500 variedades de banana. No momento em que adicionamos os incontáveis ​​tipos de maçãs, laranjas e outras frutas conhecidas, nos deparamos com milhares de opções.

Como podemos ver, a declaração de preenchimento não muda muito e salvamos algumas linhas, vamos dar uma olhada em como ficaria no navegador:

Neste elemento o criamos com uma borda um tanto irregular, se não tivéssemos aplicado o padding a borda teria interceptado o texto, faça a alteração e verifique em seu navegador para ver a diferença.
Com isso terminamos nosso tutorial de preenchimento de HTML5, agora podemos criar espaços dentro dos elementos que contêm nosso conteúdo no documento HTML, e o que nos resta é continuar praticando até que tenhamos dominado o que aprendemos neste tutorial.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo