Пробел в верхней части страницы

У меня около 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>

источник

2013-09-12 dan_vitch

Пожалуйста, отправьте выход HTML (Просмотр страницы источника (Chrome)) –

Любой конкретный браузер? – Boaz

Chrome - браузер, который я использую. Я бросил html здесь. Извините за плохое форматирование https://docs.google.com/document/d/1a050Lu76gd2Gu1JlxRsNlZmUjzNYYXiNLFMWlx8vlU4/edit?usp=sharing –

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

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

UPDATE: используйте универсальный селектор Вместо: @Frank упоминалось, что вы можете использовать Univers аль Selector: * вместо перечисления всех элементов, и этот селектор выглядит она cross browser compatible in all major browsers:

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

источник

2013-09-12 19:06:06

это делает белое пространство Уходи –

Другими словами вас получив желаемый результат? –

Вы можете добиться такого же эффекта, используя * для выбора всех элементов. Как '* {css}' Таким образом, вам не нужно будет перечислять каждый элемент. – Frank

Попробуйте

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

источник

2013-09-12 19:06:50 mdesdev

'height: 100%' вызывает полосу прокрутки для меня в Chrome. – cyrf

@cyrf просто добавьте свойство размера окна с граничным значением, например. box-size: border-box; – mdesdev

Проверить любые стили WebKit быть применен к элементам, как ул, h4 и т.д. Для меня это была маржа до и после этого.

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

источник

2013-10-02 00:38:01 Beetny

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

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

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

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

источник

2015-03-10 14:57:45 rocketmonkeys

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

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

Удалить HTML Сущности

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

источник

2016-11-18 08:16:46

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

position: relative; 
top: -22px;

источник

2017-10-05 00:29:06

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

position: relative; top: -22px;

источник

2018-03-07 17:10:58

Пробел в верхней части страницы

ответ

Смежные вопросы