-webkit-margin agrega margen no deseado en los textos

Esto no me había afectado hasta ahora (y esto no es solo en los navegadores webkit). En todos los textos en tags p similares, tags h1 , etc … hay un espacio adicional por encima y debajo del texto.

En cromo encontré esto:

hoja de estilo del agente de usuario

 -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; 

Esto hace que la alineación sea incorrecta en algunos lugares. Y sí, estoy usando una hoja de estilo de reinicio y no se agregaron relleno o margen. Prácticamente una configuración básica. ¿Por qué es esto y cómo lo resuelvo?

También puede modificar directamente esos atributos de esta manera:

 -webkit-margin-before:0em; -webkit-margin-after:0em; 

Funciona para mí en Chrome / Safari. ¡Espero que ayude!

Estos -webkit-margin (s) se sobrescriben con el margin: 0; padding: 0; margin: 0; padding: 0; . No te preocupes por ellos.

¿Espacio extra? Tal vez has establecido line-height: 😕

Tuve el mismo problema. Se muestra correctamente en Firefox pero no en Chrome.

Eché un vistazo más de cerca a http://meyerweb.com/eric/tools/css/reset/ y descubrí que no había declarado una altura de línea general para la etiqueta de cuerpo en mi hoja de estilo. Establézcalo en 1.2 y recree el diseño correcto en ambos buscadores.

Simplemente elimine los espacios en blanco entre tags, por ejemplo

 

se convierte en:

 

Tuve el mismo problema Espacio extra entre los enlaces de menú. Ninguna de las soluciones anteriores funcionó. Lo que funcionó para mí fue el margen negativo. Solo haz algo como esto:

 margin: 0 -2px; 

NUEVA EDICIÓN:

Esto no tiene nada que ver con -webkit-márgenes. Lo más probable es que su problema ocurra con elementos en línea. Esto sucede porque tiene espacios o saltos de línea entre sus elementos en línea. Para solucionar esto, tienes muchas opciones:

  • eliminar todos los espacios y saltos de línea entre los elementos en línea
  • Saltar etiqueta de cierre del elemento: por ejemplo,
  • (a HTML5 no le importa)

  • margen negativo (como se indicó anteriormente – problemas con IE6 / 7 – a quién le importa, actualizar;)
  • establecer font-size: 0; al contenedor de elementos en línea problemático (tiene problemas con Android y si el tamaño de fuente con ems)
  • renunciar a la línea y usar flotación (de esta manera pierde texto-alinear: centro)

Explicado más específicamente y ejemplos de CHRIS COYIER

Estaba teniendo el mismo problema con mi etiqueta

. Intenté establecer el margin:0; , pero no funcionó.

Descubrí que habitualmente estaba comentando líneas en mi CSS usando // . Nunca lo noté porque no había causado ningún problema antes. Pero cuando usé // en la línea antes de declarar

, causó que el navegador omita la statement por completo. Cuando intercambié // por /**/ pude ajustar el margen.

Moraleja de esta historia: ¡utilice siempre la syntax de comentarios adecuada!

Para mí, la imagen fue:

 * {margin:0;padding:0;} 

Firefox (FF) y Google Chrome ambos ponen márgenes de 0,67 millones independientemente. FF mostró su margen predeterminado, pero tachado, pero lo aplicó de todos modos. GC mostró su margen predeterminado (-webkit-margin-before …) sin cruzar.

Apliqué

 * {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;} 

pero fue en vano, aunque GC ahora mostró su margen predeterminado cruzado.

Descubrí que puedo aplicar cualquiera

 line-height: 0; 

o

 font-size: 0; 

para lograr el efecto deseado Esto tiene sentido, si se supone, que el margen es del tipo .67em. Si alguien pudiera dar una explicación, por qué los navegadores hacen que nuestras vidas sean miserables al aplicar un margen no removible dependiente de la altura de la línea, le estaría muy agradecido.

Para mí, en Chrome, fue algo de 40px padding-start que estaba causando esto. Hice lo siguiente que funcionó:

 ul { -webkit-padding-start: 0em; } 
  -webkit-margin-before: 0em; -webkit-padding-start: 0; -webkit-margin-after: 0em; 

Esto lo resolvió para mí cuando tuve este problema exacto.

Yo tuve el mismo problema. De repente, una de mis tres celdas de la tabla con datos de su encabezado se movió un poco hacia abajo. Mi problema simplemente se resolvió agregando esto:

 table td { vertical-align: top; } 

Parece que algún otro elemento en una hoja de estilo ‘superior’ decía a mis datos que se centraran en la celda, en lugar de quedarse en la cima.

Supongo que es simplemente estúpido, y no fue realmente un problema … pero la siguiente persona que lea este tema podría tener el mismo error estúpido que yo 🙂

¡Cuídate!

Si user agent stylesheet está activando, es porque la propiedad de la etiqueta no se ha definido correctamente en su hoja de estilo css.

Lo más probable es que un error ortográfico, un corchete olvidado o un punto y coma esté dividiendo tu hoja de estilo ANTES de llegar a la configuración de la propiedad de la etiqueta a la que tu página se refiere o “necesita”.

Ejecute su CSS a través de la comprobación de errores, como CSS LINT y corrija los errores que eventualmente se detecten.

    Intereting Posts