Aprenda como funcionam: Margin, padding e border no CSS
Domine as propriedades margin, padding e border no CSS para modificar os elementos de sua página HTML.
Imagine que os elementos do HTML são caixas. Vamos supor que ao criarmos uma "div" estamos criando uma caixa. Essa caixa vai ser usada para guardar conteúdos.
Essa caixa ocupa um espaço na página HTML. Esse espaço vai além de somente altura e largura da div. Existem 3 outras propriedades que devem ser levadas em conta ao tratar das dimensões de um elemento e essas propriedades são margem (margin), espaçamento (padding) e borda (border).
A propriedade de margem é responsável por afastar um elemento dos demais, dar um espaço externo ao redor do elemento em questão.
Imaginando ainda os elementos como caixas, pense numa sala cheia de caixas, a propriedade margin poderia ser entendida como a distância que uma caixa está das outras caixas.
Na imagen acima pense o elemento como a caixa amarela. As margens podem ser vistas como o afastamento ao redor desse elemento. Existe a margem na parte de cima, direita, abaixo e a esquerda.
Vamos ver um exemplo de CSS usando margin:
#teste{ margin: 20px 20px 20px 20px; }
No exemplo acima afastamos externamente o elemento "teste" 20px do topo, da direita, de baixo e da esquerda nessa ordem. Os quatro valores que colocamos em "margin" são referentes à essa ordem.
Se colocássemos apenas o "margin: 20px" teria o mesmo efeito, aplicando o valor 20px para os 4 lados ao redor do elemento.
Seguindo a lógica de que o primeiro valor de "margin" é do topo, o segundo da direita, o terceiro de baixo e o quarto da esquerda, podemos também variar a escrita.
Se colocarmos por exemplo "margin: 20px 10px" o navegador vai entender que o primeiro valor (20px) deve ser aplicado no topo e parte de baixo, e o segundo valor (10px) aplicado para a direita e também esquerda.
E se colocarmos 3 valores tipo "margin: 20px 10px 30px"? O navegador vai aplicar 20px de margem ao topo, 10px de margem a direita, 30px de margem para baixo e 10px para a esquerda, pois como faltou o valor da esquerda o navegador replica o mesmo valor da margem a direita.
Podemos aplicar margem também especificando diretamente qual lado queremos aplicar, por exemplo: margin-top: 10px, margin-right: 10px, margin-bottom: 10px e margin-left: 10px.
Dessa forma somente o lado que especificamos receberá o afastamento de margem.
Se você voltar para a imagem que usamos anteriormente vai ver que o espaçamento (padding) é o afastamento que damos dentro do elemento, é o quanto o conteúdo que está dentro do elemento deve se afastar das paredes.
Na imagem podemos ver que o conteúdo do elemento (em azul) está afastado das paredes do elemento, isso resume bem o que é o "padding".
A aplicação é muito semelhante ao "margin":
#teste{ padding: 20px 20px 20px 20px; }
Seguindo a mesma regra de "margin", os 4 valores de "padding" são os 4 lados no qual o conteúdo do elemento se afasta das paredes da "caixa".
As bordas de um elemento são os contornos da "caixa" que estamos tratando. Podemos personalizar visualmente como deve ser o contorno de um elemento usando a propriedade "border".
#teste{ border: 3px solid #0000FF; }
Esse exemplo é mostrado como:
div exemplo com bordas
Perceba que colocamos 3 valores na propriedade "border: solid 3px #0000FF". As bordas possuem 3 características: a primeira é o estilo da borda, nesse caso informamos que deve ser sólida (totalmente preenchida).
O estilo da borda poderia ser por exemplo "dashed", nessa caso seria tracejada como por exemplo:
O segundo valor é referente a largura da borda, ou melhor a espessura da borda. O terceiro valor é a cor da borda, representada nesse exemplo por "#0000FF".