Artigos HTML e CSS Entendendo os atributos CSS Margin e Padding

Muita gente sempre pergunta sobre como funcionam os atributos margin e padding e é especialmente para essas pessoas que esse artigo foi escrito, para ver se conseguem tirar essa dúvida de uma vez por todas.

Pra que serve?

Basicamente esses atributos são atributos de recuo e/ou espaçamento, por exemplo: recuo de listas, espaçamento padrão de navegadores, etc.

Pra começar vamos considerar um espaço ao redor do conteúdo de uma página. Normalmente os navegadores possuem por padrão um espaço de 8px de espaço entre o conteúdo da página e as bordas da janela do navegador, por padrão.

Como estilizar?

Vamos começar a ver como utilizar essas propriedades, na listagem 1 veremos uma declaração simples na tag body, iremos zerar essas propriedades, já que os navegadores possuem cada um seu próprio valor para isso, então iremos zerar e deixar todos com os mesmos valores de margin e padding.


body{margin: 0; padding: 0;}
Listagem 1. Declaração básica

O código acima vai remover o espaço de todos os navegadores, deixando eles com um valor padrão.

Outro exemplo de utilização é o uso em listas, podemos definir o recuo em listas, ordenadas ou desordenadas, usando margin ou padding, isso vai depender do navegador que você estiver usando, portanto sugiro que ao usar essas propriedades, faça testes e veja qual se aplicará melhor para você.


ul, ol{margin-left: 0;}
Listagem 2. Recuo em listas

O código acima irá remover todo o espaçamento da esquerda das listas. Isso irá funcionar na maioria dos navegadores, mas não em todos. Caso queira que fique mais próximo possível em todos os navegadores, precisamos adicionar o padding em nosso código.


ul, ol{margin-left: 0; padding-left:0;}
Listagem 3. Recuo em listas em todos navegadores

É importante deixar claro que essas propriedades não servem apenas para se remover os recuos, mas também podem ser usadas para inserirmos espaçamentos.

Na maioria dos casos, não importa como utilizamos isso. Se você quiser atribuir um background nas suas listas, elas irão começar a importar o recuo. Isso acontece porque os marcadores(bullets, quadrados, letras e números) são inseridos do lado esquerdo da lista. Dessa forma eles irão remover o padding e margin ou qualquer outro espaço que existir do lado esquerdo.

Recuo Negativo de listas

Agora iremos falar aqui de técnicas que fazem a primeira linha de um item de lista ficar deslocada à esquerda do resto do texto.

Esse é um efeito interessante, porque nos permite distinguir os itens de lista sem ser necessário deixar a página tumultuada com marcadores ou qualquer outra coisa usada pra delimitar listas, além de ser muito fácil de se fazer, como veremos a seguir.


<html>
<head>
	<title>Entendendo Margin e Padding - Devmedia</title>
	<style type="text/css">
	ul{text-indent: -2em; list-style: none;}
	</style>
</head>
<body>
<p>Segue a lista abaixo:</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et 
odio sed sem dignissim malesuada eu nec nunc. 
	Quisque eget sapien non nibh interdum convallis. Aliquam eu felis in 
	lorem pulvinar blandit semper et lorem. 
	Aliquam consectetur laoreet adipiscing. Ut et leo nisi. Phasellus est 
	turpis, mattis eu pharetra vel, euismod quis velit. 
	Aliquam quam sapien, imperdiet ac sollicitudin eget, ultrices nec elit. 
	Suspendisse venenatis, risus vel sollicitudin euismod, tellus purus 
	lacinia arcu, ac laoreet massa nisl non eros. 
	Aliquam euismod vehicula nunc, ac accumsan purus rutrum a. In ante 
	enim, pulvinar vel accumsan eget, convallis eu enim. 
	Vivamus placerat sem eros, sagittis pulvinar nisl. Ut at erat erat. 
	Nam ultricies, turpis non pulvinar aliquet, risus magna aliquam massa, 
	vel ullamcorper nibh nulla nec nunc. 
	Vivamus tincidunt ullamcorper auctor. Fusce vehicula euismod orci, 
	non porta arcu semper sed.</li>

<li>Aliquam auctor elementum ipsum, vitae posuere tortor 
feugiat posuere. Praesent vitae luctus diam. 
	Aenean et turpis ipsum. Quisque auctor est id mi ultrices egestas. 
	Nunc auctor nulla et mauris tincidunt vel feugiat risus commodo. 
	Aenean adipiscing, dolor ac cursus dignissim, nulla odio 
	hendrerit ipsum, nec laoreet risus nunc eu urna. 
	Aenean a ultrices ligula. Class aptent taciti sociosqu ad litora 
	torquent per conubia nostra, per inceptos himenaeos. 
	Vestibulum at metus nec mi sollicitudin facilisis vitae eu eros. 
	Donec adipiscing adipiscing iaculis. 
	Nullam elementum metus eget dui euismod vitae ornare nunc dictum. 
	Donec est metus, sagittis eu semper vel, egestas quis nisl. 
	Nunc fermentum tortor et mauris cursus nec hendrerit neque volutpat. 
	Etiam lobortis dui sit amet sapien malesuada vel dignissim nisl tincidunt. 
	Morbi vulputate tincidunt pulvinar.</li>

<li>Nullam vehicula ante nec dolor ultricies vehicula. Nunc 
scelerisque hendrerit ultricies. Aliquam non dapibus ipsum. 
	Duis iaculis viverra blandit. Aliquam erat volutpat. Duis a imperdiet elit. 
	Aliquam non risus velit. In viverra tempus rutrum. In ipsum erat, 
	ultrices eget semper vitae, rutrum at orci. 
	Suspendisse gravida mi non purus hendrerit in cursus enim tincidunt. 
	Quisque tincidunt tincidunt est volutpat venenatis. Phasellus et mauris 
	sit amet est pulvinar sagittis sed sed purus. 
	Ut ut nisi vel nisi consequat sagittis. Aenean commodo quam vitae felis 
	interdum egestas. Vivamus tristique mollis scelerisque. 
	Aliquam erat volutpat.</li>

<li>Duis mi ipsum, sodales in vulputate condimentum, pretium id diam. 
Aenean tempus fringilla lobortis. 
	Quisque suscipit ultricies consequat. Donec elementum tincidunt vehicula. 
	Ut sagittis vulputate augue, et consectetur sem hendrerit eu.
	 Sed velit leo, varius vitae dictum at, tincidunt id arcu. Proin non orci mi. 
	 Nulla augue metus, sagittis vel elementum ac, dignissim quis urna. 
	 Donec sagittis, nulla in porttitor accumsan, dolor lacus sagittis odio, 
	 vitae vestibulum felis odio molestie sem. 
	 Vivamus placerat eleifend sagittis. Proin ligula ante, dignissim nec 
	 vestibulum id, porta ut purus. 
	 Curabitur ullamcorper mattis leo quis commodo.</li>

<li>Nulla non ligula odio. Quisque sed metus orci. 
	Nunc ipsum arcu, egestas dignissim fringilla quis, dictum et ligula. 
	Vivamus blandit fermentum lorem in accumsan. 
	Praesent interdum lorem id turpis porttitor et consectetur lacus vulputate. 
	Curabitur id consectetur ante. Curabitur nulla nisl, adipiscing et 
	vestibulum ut, porttitor eget leo. 
	Donec id nulla sit amet nisi lobortis consequat.</li>
</ul>
</body>
</html>
Listagem 4. Usando recuo negativo

O código usado acima estiliza uma lista da maneira que havíamos explicado anteriormente, sem o uso de marcadores, como vemos a figura 1.

Lista estilizada com recuo negativo
Figura 1. Lista estilizada com recuo negativo

Observe que inclui o list-style: none para remover os marcadores, senão o recuo negativo ficaria sobreposto à ele. Essa técnica pode ser usada em qualquer elemento, seja uma div ou células de tabela.

Espero que tenham gostado do artigo e que tenha ficado entendido pra que serve o margin e padding.

Até o próximo artigo.

Mais material de estudo: