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. 😀