css y html5: ¿por qué mi cuerpo tiene un espacio en la parte superior?

3 minutos de lectura

avatar de usuario de matt
mate

no lo entiendo Tengo …

body, html {
    height:100%;
    margin:0;
    padding:0;
}

Sin embargo, mi navegador siempre muestra la barra de desplazamiento vertical incluso si el contenido no es tan alto como la ventana.

En la siguiente captura de pantalla, puede ver que hay un pequeño espacio en la parte superior si inspecciono el body. El htmlno tiene este espaciado.

¿Alguna idea de qué podría causar eso?

ingrese la descripción de la imagen aquí

  • Creo que su problema estará en su marcado en lugar de CSS, ¿tiene espacios o líneas adicionales sobre el cuerpo?

    – Dunhamzzz

    10 de agosto de 2011 a las 8:45

  • ¿Hay algún otro contenido/etiqueta dentro de su cuerpo?

    – Rito

    10 de agosto de 2011 a las 8:46

  • ¿Hay alguna posibilidad de que podamos obtener la fuente HTML completa? Tal vez hay algo ilegítimo en tu <head> (por ejemplo, un <br /> por alguna razón) que está causando el espacio en blanco. Sé que tuve este problema con el código generado por WordPress durante unos tres meses antes de resolverlo.

    – nchpmn

    10 de agosto de 2011 a las 8:46

Probablemente tengas un elemento con margin-top como uno de los primeros hijos de body.

Leer sobre márgenes colapsados.

Puramente como un prueba sencillacolocar padding: 1px en body. Si la brecha desaparece, tengo razón.

  • Me ayudó, aunque la prueba no funcionó. Puse padding: 1px en el cuerpo pero la brecha permaneció allí. De todos modos, busqué un elemento del primer hijo con un margen superior y encontré y eliminé el margen -> el espacio desapareció.

    – ohcibi

    5 de marzo de 2015 a las 19:20

  • Trick funcionó para mí … me ayudó a ver un div tan obvio que lo estaba pasando por alto por completo.

    – Kalnodo

    5 de diciembre de 2017 a las 16:57

  • Esto todavía sucede en 2021 y su prueba funcionó a la perfección. Pero, ¿existe una solución “limpia” para este problema? Al menos en mi página web, mi barra de navegación tiene un margen superior.

    – OuuGiii

    28 oct 2021 a las 13:25

Llegó tarde a la conversación, pero pensé que esto podría ayudar un poco…

Si este es un sitio basado en WordPress, es probable que WordPress esté agregando:

 html { margin-top: 32px !important; }

Está haciendo esto para hacer espacio para la barra de administración, que, aparentemente, por alguna razón no aparece.

Para resolver esto, agregue lo siguiente al archivo functions.php de su tema:

add_filter('show_admin_bar', '__return_false');

Tuve esto por una razón completamente diferente: estaba insertando inadvertidamente caracteres de texto (específicamente, punto y coma) en el encabezado, que de alguna manera se traducían al cuerpo, donde estaban ocultos por otro marcado y/o css. Pero, el espacio permaneció.

En mi caso, ni el cuerpo en sí, ni ningún elemento primogénito obvio tenía ningún margen superior o relleno. El texto adicional apareció como el primer elemento secundario (textual) del cuerpo, sin embargo, no se correspondía exactamente con el texto que necesitaba eliminar para resolver el problema. Específicamente, vi el siguiente texto, con muchos espacios en blanco adicionales:

<body>
";




<!-- rest of stuff here -->

Tenga en cuenta que estoy usando un motor de plantillas HTML (específicamente Razor), por lo que todas las apuestas están canceladas en cuanto a cómo esta transmutación de ; ; a "; ocurrió.

intentar

body {
margin: 0;
padding: 0;
}

¿Ha sido útil esta solución?