margenes - que es margin y padding en css

-webkit-margin agrega margen no deseado en los textos

Question

Esto no me había afectado hasta ahora (y esto no es solo en los navegadores webkit). En todos los textos en etiquetas p similares, etiquetas 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?

Answer 1

Estaba teniendo el mismo problema con mi etiqueta <h3> . 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 <h3> , causó que el navegador omita la declaración por completo. Cuando intercambié // por /**/ pude ajustar el margen.

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

Answer 2

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: :?

Answer 3

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

ul {
    -webkit-padding-start: 0em;
}

Answer 4

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.

Answer 5

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.

Answer 6

Simplemente elimine los espacios en blanco entre etiquetas, por ejemplo

<p id="one"></p>
<p id="two"></p>

se convierte en:

<p id="one"></p><p id="two"></p>

Answer 7

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!

Answer 8

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, </li> (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

Answer 9

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.

Answer 10

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!

Answer 11

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

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