Modelo de Caja: Margin y Padding

En el modelo de caja, el margin y padding son propiedades CSS que aceptan entre uno y cuatro valores.

Un valor

Cuando usas un solo valor, se entiende que el valor es aplicado a todos los lados de la caja. en el siguiente ejemplo, los 20px definidos en "padding" son aplicados en los cuatro lados de la caja, entre el borde y el contenido. Los 40 px definidos en "margin" son aplicados en los cuatro lados de la caja, entre el borde y el exterior.

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

Dos valores

Cuando usas dos valores, se entiende que el primer valor es aplicado a los lados "superior" e "inferior" y el segundo valor es aplicado a los lados "derecha" e "izquierda":

• 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;
}