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:
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!
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.
[...] 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 [...]