Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Margin e padding

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5491
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Margin e padding   12/9/2010, 1:11 am

Na lição anterior vimos o box model. Nesta lição veremos como controlar a apresentação de um elemento definindo as propriedades margin e padding.

  • Definindo margin de um elemento
  • Definindo padding de um elemento


Definindo margin de um elemento
Um elemento tem quatro lados: right, left, top e bottom (direito, esquerdo, superior e inferior). A margin é a distância entre os lados de elementos vizinhos (ou às bordas do documento). Ver o diagrama mostrado na lição anterior.

Vamos começar com um exemplo mostrando como definir margins para o documento, ou seja, para o elemento <body>. A ilustração a seguir mostra como serão as margens da página.

[Você precisa estar registrado e conectado para ver esta imagem.]

As CSS são mostradas abaixo:

Código:
body {
   margin-top: 100px;
   margin-right: 40px;
   margin-bottom: 10px;
   margin-left: 70px;
}

Ou, adotando uma sintaxe mais elegante:

Código:
body {
   margin: 100px 40px 10px 70px;
}

As margens para a maioria dos elementos pode ser definida conforme o exemplo acima. Podemos então, por exemplo, definir margens para todos os parágrafos <p>:

Código:
body {
   margin: 100px 40px 10px 70px;
}

p {
   margin: 5px 50px 5px 50px;
}

Definindo padding de um elemento
Padding pode também ser entendido como "enchimento". Isto faz sentido, porque padding não é computado na distância entre elementos, padding define simplesmente a distância entre a borda e o conteúdo do elemento.

Ilustramos o uso de padding através de um exemplo onde todos os cabeçalhos têm uma cor de fundo definida:
Código:

h1 {
   background: yellow;
}

h2 {
   background: orange;
}

Definindo padding para os cabeçalhos, alteramos a quantidade de enchimento existente ao redor de cada um deles:

Código:
h1 {
   background: yellow;
   padding: 20px 20px 20px 80px;
}

h2 {
   background: orange;
   padding-left:120px;
}

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Margin e padding
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» Como fazer as categorias parecidas com essa?
» Menu personalizado
» Colocar no local correto
» Modificar e personalizar a "hr"
» Mudar coisas no quote

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - avançado-
Ir para: