Introdução:

Você sabia que o segredo para deixar sua página web organizada e visualmente agradável está nos espaçamentos? No CSS, usamos o padding e o margin para ajustar o espaço entre os elementos. Hoje, vamos aprender como isso funciona na prática, e eu prometo que você vai sair deste post entendendo como deixar seus layouts mais profissionais!

Pré-requisitos:

Antes de começarmos, é importante que você tenha algumas noções básicas. Se ainda não conhece esses conceitos, recomendo dar uma olhada nos artigos abaixo:

Agora que você já está preparado, vamos ao que interessa: padding e margin!

Estrutura HTML e CSS Básico:

Para seguirmos com os exemplos, crie dois arquivos: index.html e styles.css. Ambos devem estar dentro de uma pasta no seu computador.

O HTML básico será assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Aprendendo Padding e Margin no CSS - Vivendo de Programação</title>
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <div class="box">Eu sou uma caixa de exemplo!</div>
</body>
</html>

 

O CSS inicial apenas com borda e 1 width:

.box {
   border: 2px solid #000;
   width: 100px;
}

Salve ambos os arquivos e abra o index.html no navegador. O que você verá é uma caixa simples com uma borda preta ao redor.

O que é Padding?

Agora, vamos falar sobre padding. O padding é o espaço interno entre o conteúdo de um elemento e a sua borda. Vamos aplicar padding para entender melhor como ele funciona.

 

Adicionando padding no CSS:

.box {
   border: 2px solid #000;
   width: 100px;
   padding: 20px;
}

Salve o arquivo e recarregue a página no navegador. Veja como o texto dentro da caixa ficou mais distante da borda, criando um espaçamento interno.

 

O padding pode ser ajustado para cada lado separadamente, usando propriedades como:

  • padding-top: Espaço no topo
  • padding-right: Espaço à direita
  • padding-bottom: Espaço embaixo
  • padding-left: Espaço à esquerda


Você pode aplicar diferentes valores para cada lado, separado por espaços, lembre do sentido horário do relógío, o primeiro aplica o padding superior, o segundo o direito e assim por diante.

.box {
   border: 2px solid #000;
   width: 100px;
   padding: 10px 20px 30px 40px;
}

Existe também a possibilidade de informar o padding de forma cruzada.

 

.box {
   border: 2px solid #000;
   width: 100px;
   padding: 10px 50px;
}

Nesse caso o primeiro valor informado refere-se ao padding superior e inferior e o segundo ao padding esquerdo e direito.

O que é Margin?

Agora, vamos entender a margin. A margin é o espaço externo ao redor do elemento, separando-o de outros elementos na página.

 

Adicionando margin no CSS:

.box {
   border: 2px solid #000;
   padding: 20px;
   margin: 20px;
}

Salve o arquivo, recarregue a página e veja como a caixa agora está mais afastada de outros elementos na página, graças à margin.

 

Assim como o padding, você pode definir valores de margin para cada lado individualmente:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Exemplo prático com formulário

Agora abordaremos um exemplo prático com tudo que aprendemos até aqui.

Caso não tenham visto os posts anteriores dessa playlist, conheca a playlist Do zero ao primeiro projeto.

 

Vamos começar!

Adicione o seguinte código dentro da tag body no arquivo index.html

<form class="formulario">
        <label>Nome</label>
        <input type="text" class="inputNome" />
        <button class="botaoSalvar">Salvar</button>
    </form>

Salve e atualize a página no navegador para visualizar o formulário sem nenhuma formatação especial.

 

No arquivo styles.css, inclua esse código: 

formulario{
	border:1px solid black;
	width: 250px; 
	margin:0 auto; 
	padding:20px;
}

Entendendo cada propriedade:

  • border: Adiciona a borda de 1px, solida na cor preta ao formulário.
  • width: Limita a largura do formulário em 250px.
  • margin: Usada de forma “cruzada”, deixamos sem margem em cima e em baixo, mas deixamos a borda automatica a esquerda e a direita. Dessa forma centralizamos o formulário na tela.
  • padding: adiciona 20px ao formulário, mantendo todos os elementos separados das “paredes” do formulário.

 

Agora formataremos o label

label{
	margin-bottom: 10px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
}

Entendendo cada propriedade:

  • margin-bottom: Adiciona um espaço de 10px entre o label e o input.
  • font-weight: A[lica negrito ao texto do label.
  • font-family: Altera a fonte para Arial.

 

Vamos formatar o input do tipo texto:

utNome {
	width:200px;
	margin-bottom: 10px;
	border: 2px solid blue;
	border-radius: 10px;
	padding:10px 20px;
}

Entendendo cada propriedade:

  • width: Define a largura do input
  • margin-bottom: Adiciona um espaço entre o input e o botão abaixo:
  • border: Adicionar uma borda azul de 2 pixels.
  • border-radius: Arredonda as bordas do input.
  • padding: Adiciona espaçamento entre o texto e a borda do input, isso proporciona um espaço mais legível e agradável ao usuário.

 

Por fim, vamos formatar o botão

.botaoSalvar{
	background-color: blue;
	color:white;
	padding:10px 20px;
	border-radius: 5px;
}

Entendendo cada propriedade:

  • background-color: Permite trocar a cor de fundo do botão.
  • color: altera a cor do texto do botão.
  • border: Adiciona uma borda azul de 2 pixels.
  • border-radius: Arredonda o botão dando um aspecto mais agradável.
  • padding: Adiciona um espaçamento entre a borda e o texto do botão.

 

Todas essas alterações dão um aspecto mais agradável e personalizado ao seu formulário.

Teste outras configurações, altere os valores das pripriedades e veja como o formato é aplicado. Praticar é a melhor forma de aprender!

Boas Práticas para Iniciantes:

Mantenha o código organizado: Use padding e margin de forma consistente para criar um layout harmonioso.
Use unidades relativas: Em vez de px, experimente usar unidades como % ou em para criar espaçamentos que se adaptam a diferentes tamanhos de tela.
Teste e visualize: Sempre que modificar os valores de padding e margin, salve o arquivo e recarregue a página para ver o impacto no layout.
Centralize elementos com margin: Use margin: auto; para centralizar elementos em blocos, uma técnica útil para layouts responsivos.


Conclusão:

Hoje você aprendeu o que são padding e margin, e como essas duas propriedades são essenciais para criar espaços e organizar melhor o layout da sua página. Espaçamentos bem ajustados fazem toda a diferença no design, então brinque com os valores e teste diferentes combinações!

E não se preocupe, ainda temos muito mais para explorar! Fique ligado para aprender novos truques com CSS e continue praticando.