Sindicación
Simplifica tu CSS: Margin & padding
Mié, 28/05/2008 - 22:06
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:
InKiLiNo
#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:
InKiLiNo
- Sombra en tus tÃtulos con CSS
- Recomienda a tus lectores que no utilicen Internet Explorer
- Imagenes en tus post
- Radios con USB
You have already tagged this post. Your tags:
Noticia original: www.inkilino.com