Simplifica tu CSS: Margin & padding

Una de mis debilidades es diseñar y maquetar con CSS, y ultimamente estoy viendo muchos themes de Worpress con el CSS muy desestructurado y con muchas lineas inútiles. Y cada vez más odio ver trozos de código como este:

#div {
margin-top: 20px;
margin-bottom: 5px;
margin-right: 10px;
margin-left: 25px;
padding-top: 10px;
padding-bottom: 0px;
padding-right: 5px;
padding-left: 5px;
}

8 lineas que pueden ir en dos, imaginaos esto en todo el style.css, se multiplica el numero de lineas del css por 4, una burrada, así que os voy a dar unas nociones de CSS muy sencillitas y que os serán de mucha utilidad. Voy a dividir este post en 4 o 5, ya que todo en uno se me antoja muy largo, hoy empezaremos con el margin y el padding.

Para empezar, las dos lineas en las que se puede simplifcar el CSS de arriba son:

#div {
margin: 20px 10px 5px 25px;
padding: 10px 5px 0px 5px;
}

Para simplificar de esta manera, sólo tenéis que tener en cuenta que tanto con el margin, como con el padding las medidas se ponen empezando por arriba y siguiendo el sentido horario, por lo que quedarán de esta forma: Arriba(top), Derecha(right), Abajo(bottom), Izquierda(left).

Si nos fijamos en el padding vemos que en el padding-bottom pone 0px, eso también podemos simplificarlo, y siempre que veamos 0px, podemos cambiarlo por 0 a secas.

#div {
margin: 20px 10px 5px 25px;
padding: 10px 5px 0 5px;
}

También vemos que el valor del padding-right y el padding-left son iguales, eso también se puede simplificar:

#div {
margin: 20px 10px 5px 25px;
padding: 10px 5px 0;
}

Más Simplificaciones en CSS:

  • Cuando el margin o el padding tienen iguales las medidas laterales y la superior e inferior también se pueden agrupar así:
    #div {
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    } #div {
    margin: 0 auto;
    }
  • Cuando el margin o el padding tienen todas sus medidas iguales:
    #div {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    } #div {
    margin: 10px;
    }

Para acabar deciros que todo esto vale tanto para el margin como para el padding, y que los valores que admiten son:

auto, 0, px, pt, em, %

Y como siempre, ya sabéis que en los comentarios resuelvo todas las dudas que tengáis al respecto, por cierto mañana veremos el border.

2 comentarios en “Simplifica tu CSS: Margin & padding”

  1. que yo me enteri inki.
    con esto que conseguiría porner el icono de css donde yo quiera y como quiera?
    perdon por la ignorancia pero en ratos libres me ha dao por php.
    si es lo que imagino me interesa.

    PD: pollo hoy puede ser un gran día!
    😉

    Responder

Deja un comentario

Esta web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.

ACEPTAR
Aviso de cookies
A %d blogueros les gusta esto: