Белое пространство наверху страницы

У меня около 20 пикселей пробелов в верхней части моей страницы. Я проверял каждый элемент, и в этой области ничего нет. Когда я проверяю элемент тела, он НЕ включает это пространство. Когда я проверяю элемент html, это включает это пространство. Также, если я удалю

<!DOCTYPE html>

пробел исчезает.

Вот мой основной макет

<!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>

Ответы

Ответ 1

Добавьте css reset в начало таблицы стилей вашего веб-сайта, различные браузеры отображают некоторые поля по умолчанию и дополнения и, возможно, внешние таблицы стилей делают то, о чем вы тоже не знаете, css reset просто инициализирует новый палитра, так сказать:

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;
}

ОБНОВЛЕНИЕ: используйте универсальный селектор вместо: @Frank упомянул, что вы можете использовать Universal Selector: * вместо перечисления всех элементов, и этот селектор выглядит как кросс-браузер, совместимый во всех основных браузерах:

* {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
    }

Ответ 2

Попробуйте это

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

Ответ 3

Помимо css reset, я также добавил следующее в css моего контейнера div и исправил его.

position: relative;
top: -22px;

Ответ 4

Старый вопрос, но я просто столкнулся с этим. Иногда ваши файлы UTF-8 с спецификацией в начале, и ваш механизм шаблонов не нравится. Поэтому, когда вы включаете свой шаблон, вы получаете другую (невидимую) спецификацию, вставленную на вашу страницу...

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

Это вызывает разрыв в начале вашей страницы, где браузер отображает спецификацию, но он выглядит невидимым для вас (и в инспекторе просто отображается как пробел/кавычки.

Сохраните ваши файлы шаблонов как UTF-8 без спецификации или измените механизм шаблонов, чтобы правильно обрабатывать документы UTF8/BOM.

Ответ 5

Могло быть много причин, по которым вы получаете пустое пространство, как упоминалось выше. Предположим, если у вас есть пустой элемент div с HTML Entities, также вызывают ошибку.
Пример 

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

Удалить HTML-объекты

<div class="sample"></div>

Ответ 6

Проверьте, не применяются ли какие-либо стили webkit для таких элементов, как ul, h4 и т.д. Для меня это был margin-before и after cause this.

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

Ответ 7

Я просто вставил CSS в мой <div> теперь работающий в коде

position: relative; top: -22px;

Ответ 8

Если ничего из вышеперечисленного не помогает, проверьте, установлен ли margin-top на некоторых (некоторых уровнях ниже) вложенных элементах DOM.

Он будет неузнаваем при проверке самого элемента body в отладчике. Он будет виден только тогда, когда вы развернете несколько элементов, вложенных в элемент body в отладчике элементов Chrome Dev Tools, и проверите, есть ли один из них с установленным margin-top.

Ниже приведена верхняя часть снимка экрана сайта и соответствующее представление Chrome Dev Tools при проверке тега body.

Здесь нет никаких признаков верхнего поля, и вы сбросили все специфичные для браузера свойства CSS согласно ответам выше, но этот нежелательный пробел все еще здесь.

The unwanted white space above the body element The corresponding debugger view

Ниже приведен вид, когда вы проверяете правильный вложенный элемент. Хорошо видно оранжевое top-margin. Это тот, который вызывает пустое пространство сверху элемента body.

Clearly visible top-margin enter image description here

В этом найденном элементе замените margin-top на padding-top если вам нужно пространство над ним, но при этом не пропустите его над тегом body.

Надеюсь, это поможет :)

Ответ 9

переполнение: авто

Использование overflow: auto для <body> является более чистым решением и будет работать с очарованием.