Margin y padding

Agregar a favoritos

15 Comentarios

Posteado hace 1302 días en:

Como en el curro tengo que estar mas pendiente de la correcta visualización de los diseños en los navegadores me he fijado en algunas cosillas.

Si te das cuenta en el IE según va bajando la versión ves como se va perdiendo el soporte del CSS, hasta el IE 3 que ese ni quiere mostrar nada decente.

En versiones antiguas del IE se puede ver como apenas rulan las listas y su manipulación, me he dado cuenta que si manipulas una lista y tienes margins o paddings, incluso los bordes estos desaparecen, no existen para el.

También en el tema de imágenes, si dentro de un párrafo metes una imagen con un float:left para alinear a la izquierda no dudes en usar margins para separarla del texto pues el padding aunque rula en mozilla en los demás navegadores se hace la picha un lío.

Hay que tener cierto cuidado con los margin y padding, siempre los suelo poner a 0 y a partir de esa medida empezar a configurarlo.
Siempre sale la típica pregunta de porque las listas tiene un margin-left diferentes en los navegadores y lo que en realidad sucede es que cada uno pone un valor por defecto y eso jode el tinglado.

Bueno y ya que estamos, sobre el centrado de una capa, eso de los margin:auto; es una autentica gozada pero va cuando realmente quiere, normalemente lo suelo hacer para centrar una imagen, uso un display:block; y luego pongo los margin a auto.Para centrar una capa la cosa es diferente, esta el tipico Hack de centrar el texto en el body y luego en la capa cambiarlo.

Conclusion: Jode diseñar para tantos navegadores pero me parece a mi que gana la batalla uno que yo me se… grrrr


  • avatar

    tanke#1 hace 1302 días

    Esto es lo que se llama Box Model Hack, si buscas por el en google encontrarás mas de un tutorial explicativo y de mucha ayuda para que no te rompas tanto los cuernos…

    Yo lo he comentado hace tiempo en mi web:
    Compatibilidades y CSS

    Un saludo,

  • avatar

    sosa#2 hace 1301 días

    A mi tambien me volvían loco esos asuntos de margin y padding y hace poco ncontré por ahí un truquito que me ha resultado muy util. Consiste en poner al principio del CSS una regla
    *{margin:0;padding:0;}
    y voila! Adios a los valores por defecto.

  • avatar

    IceBeat#3 hace 1301 días

    Muchas gracias por la Info, tendre que echarle un vistazo mas detenidamente al articulo, hay cosas que ya sabia.

    Sosa como eso funcione me voy acordar de ti en mucho tiempo jejeje.BUEN truquito.

  • avatar

    Nordic#4 hace 1301 días

    IceBeat, lo que comenta Sosa es lo que uso yo cuando necesito tener control total de donde quedan las cosas y… no acaba de funcionar del todo a veces, porque por ejemplo cada navegador/SO muestra las fuentes de una forma diferente, y eso ya es suficiente para descuadrarte el diseño si está muy ajustado… pero por lo general funciona de maravilla :) .

  • avatar

    sosa#5 hace 1300 días

    bueno, pal caso imagino que podrías usar un
    *{
    padding:0;
    margin:0;
    font-size:12px;
    }

    la idea es la misma: “resetear” los valores por defecto a gusto de uno.

  • avatar

    corsaria#6 hace 1300 días

    Offtopic:

    Oops, rediseñado el site de http://www.sixapart.com/movabletype/ a cargo de los chicos de: http://muledesign.com/

    ¿Qué te parece el resultado? A mi me gusta. :))

  • avatar

    Nordic#7 hace 1300 días

    Y si usamos:

    *{
    padding:0;
    margin:0;
    font-size:12px;
    }

    ¿Qué pasará con navegadores como IE6/Win cuando cambies el tamaño de la letra en el navegador? ¿Cambiará?
    Porque no normalmente le digo:

    body {
    font-size: 80%;
    }

    Y luego juego con los EM para establecer los tamaños de los tipos de letra.

  • avatar

    sosa#8 hace 1298 días

    lo que pasa Nordic, es que queremos evitar la inconsistencia que provocan los valores por default de los navegadores si usas un valor relatìvo, seguirà siendo relatìvo a ese valor por default.
    El asunto del cambio de tamaño, queda definitivamente afectado en IE pero, digamos que es un progresive enhacement para quienes usen Firefox u otro navegador que pueda ajustar el tamaño de letras especificadas en pixeles.

    Supongo que no se puede tener todo en la vida.

  • avatar

    Nordic#9 hace 1298 días

    Sí, siempre hay que llegar a una solución de compromiso. ;)

  • avatar

    IceBeat#10 hace 1297 días

    Corsaria pues algunas cosas me gustan pero no he visto toda la web.

    Sosa tiene razon en lo del tamaño relativo, si lo pones al tanto porciento seguira siendo de todas formas relativo.

    A mi me ha dado por usar pixel porque los veo algo mas seguros pero aun asi no sigue siendo la mejor opcion.

    Al final siempre tenemos que ceder :(.

  • avatar

    Federico#11 hace 1293 días

    Sobre los navegadores de museo, siempre podes recurrir a @import para salvarlos de su propia estupidez. Por suerte venian con reglas muy básicas de ¿CSS? como para que no se pierda la información.
    Sobre los diferentes valores: ni tan diferentes. Al menos no recuerdo que sean tan obvios. Sí existe el “problema” de Mozilla versus los demás con respecto a qué es el espacio a la izquierda en las listas, pero en la medida que no necesites un trabajo perfecto a nivel pixel, los valores por defecto no son tan terribles.
    Por cierto, no entendí al final que problema tuviste con margin:auto. Las imagenes son inline por defecto así que (en principio) deberías poder centrarlas con text-align:center.
    Y sobre la queja final: Ni tanto. Sinceramente aunque IE tiene muchos bugs (aún en modo standards compliant) se dan (generalmente) en casos muy específicos. Y menos mal que está Google para ayudarnos a lidiar con ellos ;).

  • avatar

    IceBeat#12 hace 1292 días

    Bueno es verdad que con @import eliminas muchos detallitos pero no es eso lo que yo buscaba.
    La verdad es que si que hay valores por defecto que importan,es cierto que sino diseñas a nivel de pixel te da igual pero por ejemplo los margins de los parrafos varian mucho y es una cosa que debe tenerse en cuenta.
    Es cierto que las imagenes se tratan como un elemento en linea pero si la colocas dentro de un parrafo el alineamiento es para todo el parrafo, yo uso un display block para tratarlas como bloque y que el texto no afecte a la imagen.Podria usar varios parrafos pero bueno tampoco es pa morirse jeej.

    Hombre si los fallos fuesen en todos los casos entonces eso si que seria un problema gordo, pero son en esos casos cuando dices que no tienes mas remedio que adaptarlo a sus necesidades.

  • avatar

    Blid#13 hace 1278 días

    Sip lo smargin auto vienen de lujo pero, como alinearias un 2 botones submit de forma automatica ?. Yo tengo que usar medidas fijas en % o pixeles segun interfiera la resolucion. A ver si se contesta.

  • avatar

    IceBeat#14 hace 1277 días

    Blid no te endiendo que es lo que quieres decir, en principio los botones actuan como elementos en linea y con un simple text-align:center los alineas.

    Pero seguro que esa no es tu pregunta no?.

  • avatar

    blid#15 hace 1274 días

    Ha eso me refiero, pero el text-align: center; deberia de aplicarse al elemento padre que contiene ambos botones, y eso no me interesa. A mi me interesaria alinear unicamente los 2 botones independientemente más contenido del elemento padre.