Espacio en blanco en la parte superior de la página


Tengo unos 20 píxeles de espacio en blanco en la parte superior de mi página. He inspeccionado cada elemento y nada tiene relleno o margen en esta área. Cuando inspecciono el elemento del cuerpo no incluye este espacio. Cuando inspecciono el elemento html es incluye este espacio. También si elimino

<!DOCTYPE html>

El espacio en blanco desaparece.

Aquí está mi diseño principal

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    @RenderSection("Css", false)
</head>

<body>
    @RenderSection("JavaScript", false)
</body>
</html>
Author: dan_vitch, 2013-09-12

7 answers

Agregue un reset css a la parte superior de la hoja de estilo de su sitio web, los diferentes navegadores muestran algunos márgenes y rellenos predeterminados y quizás las hojas de estilo externas también hacen algo que usted no conoce, un reset css simplemente inicializará una paleta fresca, por así decirlo:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ACTUALIZAR: Utilice el Selector Universal En Su Lugar: @Frank mencionó que puede usar el Selector Universal: * en lugar de enumerar todos los elementos, y este selector parece que es compatible con navegadores cruzados en todos los principales navegadores :

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }
 44
Author: Brian Ogden,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:02:38

Prueba esto

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
 4
Author: mdesdev,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-12 19:06:50

Aparte del reset de css, también agregué lo siguiente al css de mi contenedor div y eso lo arregló.

position: relative;
top: -22px; 
 4
Author: David Hernandez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-05 00:55:04

Vieja pregunta, pero me encontré con esto. A veces sus archivos son UTF-8 con una lista de materiales al inicio, y a su motor de plantillas no le gusta eso. Así que cuando incluyes tu plantilla, obtienes otra lista de materiales (invisible) insertada en tu página...

<body>{INVISIBLE BOM HERE}...</body>

Esto causa una brecha al inicio de su página, donde el navegador renderiza la lista de materiales, pero parece invisible para usted (y en el inspector, solo aparece como espacio en blanco/comillas.

Guarde sus archivos de plantilla como UTF-8 sin BOM, o cambie su motor de plantillas para manejar correctamente los documentos UTF8/BOM.

 3
Author: rocketmonkeys,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-03-10 14:57:45

Podría haber muchas razones por las que está obteniendo espacio en blanco como se mencionó anteriormente. Supongamos que si tiene un elemento div vacío con entidades HTML también causa el error.
Ejemplo

<div class="sample">&nbsp;</div>

Eliminar entidades HTML

<div class="sample"></div>
 1
Author: Praveen M P,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-11-18 08:16:46

Compruebe si hay estilos de webkit que se apliquen a elementos como ul, h4, etc. Para mí fue el margen-antes y después de causar esto.

-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
 0
Author: Beetny,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-02 00:38:01

Acabo de poner CSS en mi <div> ahora trabajando en código

position: relative; top: -22px;
 0
Author: Siddharth Shukla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-07 17:18:34