Tutorial Iniciante de CSS: Margens e Espaçamento

7 03 2008

Elemento espaçado com CSS

margin (margem) e padding (espaçamento) são as duas propriedades mais comuns para espaçar elementos. Margin é um espaço fora do elemento, e padding é um espaço dentro do elemento.

Mude o código CSS para h2 (não mexa no resto) para o seguinte:

h2 {
	font-size: 1.5em;
	background-color: #ccc;
	margin: 1em;
	padding: 3em;
}

Você vai ver que isso deixa um espaço da largura de uma letra ao redor do segundo cabeçalho, e o próprio cabeçalho é “largo” por causa do padding (espaçamento) com a largura de três letras.

Os quatro lados também podem ser modificados individualmente. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom e padding-left são as propriedades que você pode usar pra isso. Margin-top e padding-top definem o espaço acima, *-right definem o espaço a direita, *-bottom definem o espaço abaixo e *-left definem o espaço à esquerda.

O Box Model (Modelo das Caixas)

Margens, padding e bordas (que você vai ver na próxima página) são todos partes do que é conhecido como Box Model (Modelo das Caixas). O Box Model funciona assim: no meio você tem o box (a caixa) do conteúdo (uma imagem ou um texto, por exemplo), ao redor dela você tem o padding (espaço dentro do elemento), ao redor dele você tem a borda e ao redor dela você tem a margem (espaço fora do elemento). Pode ser representado visualmente assim:

Representação em 3d do Box Model

Leia esse texto sobre o Box Model que você vai entender melhor.

Você não tem que usar todas essas propriedades, mas é importante lembrar que o modelo de caixa pode ser aplicado a qualquer elemento na página, e que é uma coisa poderosa!

BlogBlogs Tags: , , , ,

Páginas Relacionadas

  • Próxima Página: Bordas
  • Página Anterior: Texto
  • Propriedades “Atalhos” – Como usar margin e padding para especificar diferentes valores pra top, right, bottom e left em uma só propriedade (Tutorial intermediário de CSS).

Referência

Esse material é uma adaptação do CSS Beginner Tutorial, de autoria de Patrick Griffiths. Todos os direitos pertencem ao autor.

Anúncios

Ações

Information

3 responses

20 07 2008
Tutorial Avançado de CSS: Regras @ « Codando

[…] estilos para impressão. Ela define um bloco de página que se estende pelo modelo de caixa (veja Margens e Espaçamento) de modo que você define o tamanho e apresentação de uma única […]

28 06 2013
Ademar

Estava procurando um exemplo para iniciantes como eu – e esse é perfeito. Parabéns MESMO pelo post – já está adicionado como meu favorito.
Obrigado e tudo de bom.

7 01 2015
Padding-top Css Mozilla In Hutchins – Download Mozilla Firefox

[…] Tutorial iniciante de css: margens e espaçamento | codando […]

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




%d blogueiros gostam disto: