Border, margin y padding tienen ciertas mañas dignas de ser conocidas. Cuando uno llega a manejarlas, el código queda más limpio y es bastante más rápido escribirlo y modificarlo. En este post, que será corto, haré ver 3 detalles importantes:
1. Tienen un orden específico: sentido horario, comenzando de arriba, derecha, abajo e izquierda.
margin: 0 10px 5px 2px;
2. Se pueden resumir de dos maneras:
padding: 4px 4px 4px 4px; es igual a padding: 4px;
padding: 6px 2px 6px 2px; es igual a padding: 6px 2px; (se agrupan arriba-abajo con derecha-izquierda, si éstos son iguales).
3. Se deben especificar sus unidades siempre, menos si éste es 0. 0 es 0, en cualquier unidad, punto.
border-width: 2px 0 7em 6px;
Listo. Prometí que sería corto. 😀
Comentarios
Muy bueno!
que buena la analogía del reloj. siempre me confundo con esas variables al tratar de modificar el css, pero en adelante siempre la tendré en mente.
a todo esto, tu sitio tiene el estilo mas cool que he visto en una página, lejos.
se nota que sabes de css. saludos
asi es, de las maneras mas simples puedes llegar a manejar mejor los codigos. suerte.
Buena la del reloj. Y lo de resumir. =p
Hola Jorge!
Como dato Rosa habría que incluír que los margenes, padding y bordes se suman al width total de los elementos. Cuarta receta: si se usa uno o más de esos atributos, no especificar width y así evitar problemas.
gracias ismael, tenia pensado hacer otro articulo con lo de los padding y margins sumados al width…. pero me quitaste el factor sorpresa. con tiempo sacare algo mas, asi q se resuelva un problema en mi FTP. saludos a estadobeta.com
padding: 6px 2px 5px 2px; es igual a padding: 6px 2px 5px;