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

У меня около 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 согласно ответам выше, но этот нежелательный пробел все еще здесь.

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

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

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

Ответ 9

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

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