Margin y Padding

Margin y Padding aceptan entre uno y cuatro valores, a lo cual lo expresaremos de la siguiente manera: {1,4}.

Un valor

Los valores corresponden a todos los lados de la caja.

div{
  background: #5DEAA8;
  height: 100px;
  width: 100px;
  padding: 20px;
  margin: 40px;
}

Dos valores

La asignación de valores es:

• Valor 1 = Top y Bottom
• Valor 2 = Right y Left

div{
  background: #5DEAA8;
  height: 100px;
  width: 200px;
  padding: 20px 50px;
  margin: 40px 30px;
}

Tres valores

• Valor 1 = Top
• Valor 2 = Right
• Valor 3 = Bottom
• NOTA: Left tomará el valor de Right

div{
  background: #5DEAA8;
  height: 100px;
  width: 200px;
  padding: 20px 50px 60px;
  margin: 40px 30px 70px;
}

Cuatro valores

La asignación de valores es en sentido horario.

• Valor 1 = Top
• Valor 2 = Right
• Valor 3 = Bottom
• Valor 4 = Left

div{
  background: #5DEAA8;
  height: 100px;
  width: 200px;
  padding: 20px 50px 60px 90px;
  margin: 40px 30px 70px 80px;
}