SdevLab – Tutorial | CSS Padding

Fala galera!

O tutorial de hoje é a sequência do tutorial anterior, que dava continuidade à uma série de tutorias sobre CSS. Se você já tem uma noção básica não faz diferença a sequência, porém, se você deseja aprender na ordem correta, visite esta página!

Boa leitura!

ATUALIZAÇÃO (14/08/2015): Este post foi escrito com base nos tutoriais do W3C para CSS (se não me engano, esta versão é a primeira que tinha no W3C (CSS 1), ou seja, veio antes do CSS 2.1). O link de referência deste post, ou de posts seguintes desta mesma série, hoje aponta para o tutorial de CSS 2.1 ou CSS 3, logo não é mais válido. Vale lembrar que o conteúdo ainda é válido, só não é a versão mais nova!

CSS Padding

Padding é a propriedade que define o espaçamento entre o conteúdo e as bordas dos elementos. Na tabela abaixo estão listadas suas propriedades:

Propriedade Descrição Opções
padding-top define o espaçamento superior
  1. auto: valor default da margem
  2. length: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
  3. %: porcentagem da largura
padding-right define o espaçamento direita Idem
padding-bottom define o espaçamento inferior Idem
padding-left define o espaçamento esquerda Idem

Siga o modelo abaixo para testar as propriedades:

<html>
<head>
<style type="text/css">
<!--
p {padding-top: 20cm;}
-->
</style>
<title>
 Teste 8
 </title>
</head>
<body>
<p>Espaço de 20 centímetros entre o começo do texto e meu parágrafo.</p>
</body>
</html>

Existem outras maneiras de se declarar abreviadamente os espaçamentos:

  • padding: valor1……os 4 espaçamentos terão o mesmo valor;
  • padding: valor1 valor2……espaçamento superior e inferior terão valor1 – espaçamento direito e esquerdo terão valor2
  • padding: valor1 valor2 valor3……espaçamento superior terá valor1 – espaçamento direito e esquerdo terão valor2 – espaçamento inferior terá valor3

Assim como nas demais propriedades apresentadas, podemos juntar tudo em uma só regra, como no modelo abaixo, onde a ordem é superior, direita, inferior e esquerda.

<style type="text/css">
<!--
p {padding: 20px 40px 80px 5px;}
-->
</style>

Até a próxima!

Fonte de pesquisa: maujor.com

Os códigos deste post estão disponíveis em:
https://github.com/jonasvm/sdevlab-cursos/tree/master/sdevlab-css1
Contribua!

Anúncios

2 comentários sobre “SdevLab – Tutorial | CSS Padding

  1. Pingback: Tutorial CSS básico – Background « Sanoj's devLab
  2. Pingback: SdevLab – Curso | Aprenda CSS 1 Online | Sanoj's devLab

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s