Tempo de leitura: 3 minutos
Olá desenvolvedor tudo bem com você? Hoje vamos falar mais um pouco sobre esta incrível linguagem de estilização que é a CSS, e particularmente sobre a propriedade CSS Padding, que é um recurso indispensável quando se está estruturando um site.
E se você deseja aprender mais CSS, alguns dias atrás falamos bastante sobre Flebox CSS e a propriedade Float, porém hoje vamos nos concentrar apenas em CSS Padding que é uma propriedade utilizada para gerar espaço em torno do conteúdo de um elemento, dentro de qualquer borda que foi definida.
Por isso, não sai deste artigo! Pois vou explicar detalhadamente como você pode utilizá-la da melhor maneira possível, sem fazer confusão.
O que iremos aprender neste artigo?
// A propriedade padding-bottom
// A propriedade padding-right
O que é CSS Padding?
A propriedade padding define uma a distância entre o conteúdo de um elemento e suas bordas. É um atalho que evita definir uma distância para cada lado separadamente.
Leia também: introdução às transições CSS
O valor desse atributo deve ser um comprimento, uma porcentagem ou a palavra herdada. Se o valor for herdado, ele terá o mesmo preenchimento que seu elemento pai. Se uma porcentagem é usada, a porcentagem é do containing box.
Você pode definir valores diferentes para o padding em cada lado da caixa (box) usando as seguintes propriedades:
- O padding-bottom especifica o preenchimento inferior de um elemento.
- O padding-top especifica o preenchimento superior de um elemento.
- O padding-left especifica o preenchimento esquerdo de um elemento.
- O padding-right especifica o preenchimento direito de um elemento.
- O padding serve como atalho para as propriedades anteriores.
A propriedade padding-bottom
A propriedade padding-bottom define o preenchimento inferior (espaço) de um elemento. Isso pode levar um valor em termos de comprimento de %.
Exemplo:
See the Pen
bottom padding
A propriedade padding-top
A propriedade padding-top define o preenchimento superior (espaço) de um elemento. Isso pode levar um valor em termos de comprimento de %.
See the Pen
top padding
A propriedade padding-left
A propriedade padding-left define o preenchimento esquerdo (espaço) de um elemento. Isso pode levar um valor em termos de comprimento de %.
Exemplo:
See the Pen
left padding
A propriedade padding-right
A propriedade padding-right define o preenchimento direito (espaço) de um elemento. Isso pode levar um valor em termos de comprimento de%.
Exemplo:
See the Pen
right padding
A propriedade Padding
A propriedade padding define o preenchimento esquerdo, direito, superior e inferior (espaço) de um elemento. Isso pode levar um valor em termos de comprimento de %.
See the Pen
padding
Conclusão de CSS Padding
E aí, deu pra entender o funcionamento do Padding? Tenho algo ainda melhor pra você!
Deseja aprender com projetos práticos a criar aplicações completas utilizando os mais modernos frameworks do mercado?
>> Conheça o nosso treinamento completo “Pacote Full-Stack” e Domine as Tecnologias mais Atuais e Poderosas!
Com o Pacote Full-Stack, você não vai dominar apenas o CSS3 mas as maiores e principais tecnologias do mercado e se tornar um(a) Desenvolvedor(a) Full-Stack Completo, com salários que ultrapassam facilmente a faixa dos R$5.000,00. Ou ainda, poderá criar sua própria Agência/Empresa e ganhar quanto quiser. Você será dono(a) do próprio tempo!
