Como adicionar preenchimento a todos os lados no Tailwind?

Como Adicionar Preenchimento A Todos Os Lados No Tailwind



Tailwind CSS é uma estrutura bem conhecida que é utilizada para criar páginas ou designs da Web personalizáveis ​​e responsivos. Ele também permite que os usuários controlem o layout e o espaçamento dos elementos sem escrever nenhum CSS personalizado. O preenchimento é o espaço entre o conteúdo do elemento específico e sua borda. Às vezes, os usuários desejam aplicar a mesma quantidade de preenchimento a todos os lados de um elemento. O Tailwind fornece classes utilitárias para aplicar preenchimento a todos os lados de um elemento ou a lados específicos, como superior, direito, inferior ou esquerdo.

Este artigo exemplificará o método para adicionar preenchimento a todos os lados de um elemento no Tailwind.







Como adicionar preenchimento a todos os lados no Tailwind?

Para adicionar preenchimento a todos os lados de um determinado elemento no Tailwind, crie uma estrutura HTML. Em seguida, use a classe de utilitário “p-” com o elemento específico. É necessário especificar o valor desejado para aplicar preenchimento a um elemento. Em seguida, verifique a página da Web em HTML para garantir as alterações.



Sintaxe



< elemento aula = 'p-' ... elemento >


Substitua o “” por qualquer número desejado, como 2, 4, 12, 20, etc.





Exemplo

Neste exemplo, temos dois “

”elementos e aplicaremos dois paddings diferentes, ou seja, “ p-8 ' e ' p-14 ' neles:



< corpo >

< div aula = 'bg-pink-600 p-8 w-max' >
Preenchimento em CSS do Tailwind
div >

< br >

< div aula = 'bg-teal-600 p-14 w-max' >
Preenchimento em CSS do Tailwind
div >

corpo >


Aqui, no primeiro

:

    • bg-pink-600 ” define a cor rosa para o plano de fundo do elemento
      .
    • p-8 ” adiciona as 8 unidades de preenchimento a todos os lados do contêiner.
    • w-max ” define a largura do elemento
      para sua largura máxima de conteúdo.

No segundo

:

    • bg-teal-600 ” define a cor azul-petróleo para o fundo do elemento
      .
    • p-14 ” aplica 14 unidades de preenchimento em todos os lados do contêiner.
    • w-max ” define a largura do elemento
      para sua largura máxima de conteúdo.

Saída


De acordo com a saída acima, o preenchimento especificado foi aplicado a todos os lados de ambos os contêineres.

Conclusão

Para adicionar preenchimento a todos os lados de um elemento no Tailwind, a classe de utilitário “p-” é usada com o elemento desejado no programa HTML. Os usuários precisam especificar o valor específico para aplicar preenchimento a um elemento. Para verificação, verifique a página da Web em HTML e verifique as alterações. Este artigo exemplificou o método para adicionar preenchimento a todos os lados de um elemento no Tailwind.