2008 May 29

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.

Related Posts with ThumbnailsTambién te puede interesar:
Suscribete gratis
  1. Gravatar

    RiPliE

    # 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! ;)

    Con Mozilla Firefox Mozilla Firefox 2.0.0.12 y Ubuntu Linux Ubuntu Linux
    El Jueves 29 de Mayo de 2008 a las 9:27
  1. Simplifica tu CSS: Border en Blog Personal de InKiLiNo | Wordpress, Plugins y algo de SEO.

(obligatorio)





InKiLiNo.com feed feed Del.icio.us Technorati Facebook Twitter FlickR Youtube

  • Hosting para Blogs

  • amis: soy muy nuevo en esto,me gustaria subir el pagerank de mi web www.zapateria-amis.es por si alguien me puede...
  • teorico: muchas gracias.
  • InKiLiNo: Kimelet, si sigues los pasos tendría que salirte, es muuy fácil, no hay complicación alguna, ¿has...
  • Kimelet: No he conseguido lograr ver el tema del reader. Creo que està todo correcto però no logro que aparezca....
  • Marcos: Y la pagina es como el orto de mala, dice que tengo safari y tengo google chrome y dice que tengo MAC OS X y...
  • Marcos: Las explicaciones no detallan bien los nombres de los utiles necesarios para la construccion
  • juampi: jaja
  • Marcos: Te gusta la Mahou? Pues… este verano ponme una Mahou. Pa’ reirse. http://www.youtube.com/watc...