fgsfg

522 palavras 3 páginas
Os espaçamentos nos elementos HTML
A propriedade para espaçamentos (alguns traduzem como "enchimento"), define um valor para os espaçamentos entre o conteúdo e as bordas dos elementos HTML.
As propriedades para espaçamentos são as listadas abaixo: padding-top..........define a espaçamento superior; padding-right........define a espaçamento direita; padding-bottom.......define a espaçamento inferior; padding-left.........define a espaçamento esquerda; padding..............maneira abreviada para todas os espaçamentos
Valores válidos para as propriedades de espaçamento
1. auto: valor default da margem
2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
3. %: porcentagem da largura do elemento pai
Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.
Como estudar e entender os exemplos
Para cada propriedade apresento as regras CSS para um elemento HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.
A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Bons estudos! E faça ótimo proveito dos tutorial.
Nota: Coloquei um fundo cinza mais escuro nos exemplos para facilitar a visualização. padding-top...o espaçamento superior

Um espaçamento superior de 2cm

Este é o efeito da folha de estilo acima:
Um espaçamento superior de 2cm padding-right...o espaçamento direito

Um espaçamento direito de 300px nesta frase mais longa dentro do parágrafo

Este é o efeito da folha de estilo acima:
Um espaçamento a direita de 300px nesta frase mais longa dentro do parágrafo padding-bottom...o espaçamento inferior

Um espaçamento inferior de 2.0em

Este é o efeito da folha de estilo acima:
Um espaçamento inferior de 2.0em padding-left...o espaçamento esquerdo

Relacionados