Propiedades Margin y Padding CSS

Hola a todos, hoy os explicare como usar las propiedades margin y padding de CSS, que son muy usadas a la hora del posicionamiento.

Margin y padding permiten controlar el espacio entre elementos.

Margin controla el espacio externo, separando unos elementos de otros.

Padding controla el espacio interno, separando el texto con la caja del elemento. Si ponemos estas propiedades, afectara a todos los lados: la parte de arriba, la de abajo, la de la izquierda y derecha. Si queremos controlar el espacio de una zona concreta debemos poner a estas propiedades los sufijos, -top (arriba), -bottom (abajo), -left (izquierda) y -right (derecha).

Las unidades de medida que se suele utilizar para estas propiedades son los pixeles (si es poco espacio) y los porcentajes. Veamos algunos ejemplos: Primero veremos un ejemplo de margin y después de padding.

.m_izquierdo_superior{
   margin-left: 20%;
   margin-top: 15px;
   border: solid 1px;
}
.m_derecho_inferior{
   margin-right: 20%;
   margin-bottom: 15px;
   border: solid 1px;
}

Si queremos modificar, varias posiciones de una forma mas rápida podemos hacer lo siguiente:

.margen {
   margin: 15px 5px 10px 5px;
   border: solid 1px;
}

Como vemos en el archivo CSS, hay 4 medidas distintas, la primera es el margen superior, el resto sigue las agujas del reloj.

Ahora vemos algún ejemplo de padding.

.padding {
   padding-top: 5px;
   padding-left: 7px;
   border: solid 1px;
}

Si queremos modificar, varias posiciones de una forma mas rápida podemos hacer lo siguiente:

.padding {
   padding: 10px 5px 12px 7px;
   border: solid 1px;
}

Espero que os sea de ayuda.