Algunas palabras sobre márgenes y demases

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. :D

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

  1. Xavi Ivars

    Muy bueno!
  2. josé luis báez

    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
  3. CSSLab Admin

    asi es, de las maneras mas simples puedes llegar a manejar mejor los codigos. suerte.
  4. cazorla

    Buena la del reloj. Y lo de resumir. =p
  5. Ismael

    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.
  6. CSSLab Admin

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

    padding: 6px 2px 5px 2px; es igual a padding: 6px 2px 5px;