Algunas palabras sobre márgenes y demases

14/sep/2006 7

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

  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;

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab