JMiur [E]

Hay dos propiedades que establecen la separación de los elementos: margin y padding. Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo son. Podríamos decir que margin es la separación de un elemento de otro y padding es el relleno, la separación entre un elemento y aquel que lo contiene ¿Confuso? Ciertamente, lo es.

Veamos la sintaxis de las propiedades ya que son sencillas.

margin es una forma reducida de establecer la separación de los cuatro bordes al mismo tiempo.

sintaxis en HTML
elemento {margin: valores;}
por ejemplo: div {margin: 2px 0 10px 5px;}

sintaxis en JAVASCRIPT
elemento.style.{margin='valores';
por ejemplo: this.style.margin='2px 0 10px 5px';

Donde el orden de los valores es: arriba, derecha, abajo e izquierda, cada una de ellos puede ser especificad por separado.

La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; margin-bottom el margen inferior y margin-left el margen izquierdo.

sintaxis en HTML
elemento {margin-top: valor;}
elemento {margin-roght: valor;}
elemento {margin-bottom: valor;}
elemento {margin-left: valor;}
por ejemplo: div {margin-left: 5px;}

sintaxis en JAVASCRIPT
elemento.style.marginTop='valor';
elemento.style.marginRight='valor';
elemento.style.marginBottom='valor';
elemento.style.marginLeft='valor';
por ejemplo: this.style.marginLeft='5px';

Los posible valores son auto, cm, mm, in,pt, pc, px, em, ex o un porcentaje y pueden ser tanto positivos como negativos. Por defecto, es cero.
  • Si sólo de especifica un valor, este se aplica a los cuatro lados.
  • Si se especifican dos valores, el primero se aplica a los márgenes superior e inferior y el segundo a los márgenes derecho e izquierdo.
  • Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los márgenes derecho e izquierdo y el tercero al margen inferior.
  • Si establecemos cuatro valores, definirán los márgenes superior, derecho, inferior e izquierdo respectivamente.
Los valores los separamos mediante espacios; por ejemplo:

div {margin: 10px 20px;}

En los llamados elementos inline, los márgenes superior e inferior no tienen efectos prácticos.

La propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismo tiempo y tiene la misma sintaxis que margin.

sintaxis en HTML
elemento {padding: valores;}
elemento {padding-top: valor;}
elemento {padding-right: valor;}
elemento {padding-bottom: valor;}
elemento {padding-left: valor;}
por ejemplo: div {padding-left: 5px;}

sintaxis en JAVASCRIPT
elemento.style.padding='valores';
elemento.style.paddingTop='valor';
elemento.style.paddingRight='valor';
elemento.style.paddingBottom='valor';
elemento.style.paddingLeft='valor';
por ejemplo: this.style.paddingLeft='5px';

El padding o relleno, es la cantidad de espacio a insertar entre el objeto y su margen o, si hay un borde (propiedad border) la distancia entre el objeto y el borde.

Sigue todas las reglas que los márgenes excepto que sólo se pueden usar valores positivos. Por ejemplo:

div {padding: 50px 10px 20px 30px}








Cada elemento de una página web es un rectángulo que tiene un contenido (textos, imágenes, etc.) y una serie de áreas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamaño final depende de todas y cada una de esas propiedades aunque también depende de si han asignadas otras propiedades como width y height, si contiene texto u otros elementos, si es una tabla, si ... etc.

En térmimos generales, el ancho es la suma de los márgenes, los bordes y los rellenos izquierdos y derechos más el ancho del contenido y la altura es la suma de los márgenes, lso bordes y los rellenos superiores e inferiores más la altura del contenido.


Hay una propiedad extra relacionada, se trata de outline y es similar a la propiedad border pero, no ocupa espacio y adopta la forma del elemento, es decir, puede no ser rectangular.

Es una propiedad que vemos habitualmente, cuando hacemos click en algunos enlaces y vemos una línea punteada a su alrededor. Lamentablemente, no es reconocida por Internet Explorer pero podemos agregarla a las propiedades de estilo sin inconvenientes.

La propiedad genérica outline tiene los mismos parámetros que los bordes: width, style y color.

sintaxis en HTML
elemento {outline: valores;}
por ejemplo: img {outline: 2px 0 10px 5px;}

También podemos usar las propiedades individuales:

elemento {outline-width: valor;}
thin | medium | thick | longitud (el ancho del contorno valor inicial medium)

elemento {outline-style: valor;}
none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)

elemento {outline-color: valor;}
el color del contorno (valor inicial invert)

MÁS INFORMACIÓN:
  • La propiedad outline
  • CSS y los textos (parte 2)

  • SUMARIO:
  • Las propiedades CSS (background)
  • Las propiedades CSS (border)
  • 12 comentarios:

    La Blogueria  

    Gracias maestro, la verdad que te superas en cada post. Claro y nítido como agua de manantial.

    La propiedad "outline" parece tener poco valor estético... aunque sí un uso práctico como el que comentas, el de recuadrar objetos para diferenciarlos durante la edición sin que afecte a sus medidas...
    Nunca se me habia ocurrido cambiarle los valores y usarlo como elemento decorativo, puede tener posibilidades en casos de espacio reducido o qué sé yo... hace mucho que saqué los puntitos de los enlaces y aun me sorprende verlos por ahi, son feos, feos. Pero si no estuvieran, y se pudieran poner a voluntad, seguro que ya lo habia aplicado a todas las imágenes (y en diferentes colores :| ).

    Me llevo este post a mi lista de entradas sobre CSS de Vagabundia ;D con permiso...

    Responder
    La Blogueria  

    Hola! yo de nuevo un rato después... me retracto: es muy útil si se te ocurre que quieres aplicar un doble borde, mejor dicho, un borde sobre el borde. Porque no se pueden aplicar 2 bordes a una imagen, ¿verdad? pues con outline obtenemos un borde sobre otro borde.

    Es útil para algo inútil, quiero decir.

    Responder
    JMiur  

    Jajaja, outline es útil en varios sentido, primero, para mi gusto, para eliminar esos puntitos de los enlaces, algo que siempre me ha molestado pero, eso es muy personal.

    Segundo, por eso que dices, es un borde que no ocupa espacio así que lo podemos usarlo como segundo borde y ahí ya todo depende de la imaginación de cada uno.

    Tercero, es muy útil cuando se hace un debug, cuando se quieren marcar bloques o zonas de alguna forma para ver el espacio real que ocupan, dónde empiezan y donde terminan, por ejemplo.

    Responder
    Raúl  

    Hola

    Permiteme decir que tu blog es excelente, me ha ayudado bastante y solo lo encontre ayer.

    Ojala visites los mios y digas que opinas:

    http://hastaquechoqueelhueso.blogspot.com

    http://fotometrico.blogspot.com

    saludos

    Responder
    Max & Birrax  

    Hola, JMiur.

    Aquí estoy molestando una vez más. A ver si puedes hacer el favor de ayudarme y a ver si yo soy capaz de explicarme. Imagina:

    Tengo en una entrada una imagen alineada a izquierdas con un borde a su alrededor. El código de la plantilla es el siguiente:

    .post img {
    padding: 5px;
    border: 1px solid gray;
    }

    El problema es que el texto que va por su parte superior se queda muy pegado al borde y no me gusta cómo queda. Entonces me voy a editar la entrada y veo:

    margin:0 10px 10px 0;

    lo modifico a:

    margin:10px 10px 10px 0;

    y perfecto. Ya se muestran imagen y texto como yo quiero. Borro esta modificación, vuelvo a la plantilla indicando:

    .post img {
    padding: 5px;
    border: 1px solid gray;
    margin:10px 10px 10px 0;
    }

    y ahora no funciona.

    ¿Sabes qué podría hacer para conseguir lo que quiero? Te lo pregunto porque podría hacer la modificación que te indicaba más arriba en los atributos de cada imagen que vaya a incluir en cada entrada, pero si lo pudiera automatizar, obviamente, sería más cómodo.

    Bueno, pues como siempre, gracias y saludos,

    Max & Birrax.

    P.S.: Si quieres verlo en vivo y en directo, haz el favor de avisarme. Lo estoy intentando en un blog de pruebas y tendría que enviarte la dirección en un privado porque no quiero darla a conocer.

    Por cierto, la plantilla es una Denim.

    Responder
    JMiur  

    Sí, Max, necesitaría verlo online porque da la impresión de haber alguna otra propiedad que sobrescribe los datos así que envíame la dirección de las pruebas y me fijo.

    Responder
    Max & Birrax  

    Hola, JMiur.

    Acabo de enviarte un correo a tu cuenta de GMail.

    Por favor, no lo tomes como algo urgente porque para mí no lo es.

    Gracias y saludos,

    Max & Birrax.

    Responder
    azul#  

    hola, estoy tratando de separar 2 pixels por arriba el div contendor del menú pero no consigo hacerlo. Es lo primero que hago en html y css. Puedes sugerirme algo? Felecidades por el blog, se agradece que alguién hag aalgo con entusiasmo, y por lo que he leído por aquí, solucionas muchas cosas:)

    http://sgadrt.freehostia.com

    Responder
    JMiur  

    Aunque no se exactamente que resultado quieres, podrías ver el margen de cuaqlueira de estas definiciones:

    #menu {
    ...........
    margin:0 auto;
    }

    ahi podría ser margin:2px auto 0 auto;

    #menu ul {
    ...........
    margin:0 0 0 10px;
    }

    o aquí margin:2px 0 0 10px;

    Responder
    azul#  

    Hola de nuevo, he estado intentado colocar las propiedades que me indicabas, pero no me da resultado. Lo que buscaba esque la barra del menú este separada verticalmente tanto del header como del resto de los elemento que tiene después debajo de ella, (las 3 columnas principales.

    Es decir, quisiera que el menú tuviese un margen de 2 pixels por arriba y de otros 2 por abajo. COmo puedo hacerlo? si le pongo margen arriba me funciona, pero el de debajo no lo veo. No se si me aplicar un margen-top y un margin-bottom de 2 px en el menú. Por qu eno funciona??

    sgadrt.freehostia.com

    Responder
    JMiur  

    Como no veo esos cambios en la plantilla, no puedo agregar mucho más. Así se vería colocando:
    #menu {
    ...........
    margin:2px auto;
    }

    Responder
    XISCO  

    :) Gracias es de buena ayuda que hoy tengo examen de esto.

    Responder

    ¿Quiere dejar un comentario?

    recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

    Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
    De todos modos, también puede accederse a ellos a través de SkyDrive

    Nota: sólo los miembros de este blog pueden publicar comentarios.

    Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

    Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

     
    CERRAR