белая полоса в верхней части HTML-страницы, несмотря на все поля, отступы и т. Д. Установлено значение 0

#css #html

#css #HTML

Вопрос:

У меня есть белая (на самом деле, цвет тела, ghostwhite) Полоса в верхней части моей HTML-страницы, Хотя все поля, отступы и т. Д. И т. Д. Установлены в 0.

URL: (редактировать: удалено, потому что оно устарело)

Я тщательно исследовал все, что мог придумать, и у меня официально нет идей, что является причиной этого. Действительно странно то, что я скопировал CSS с тестовой страницы, и он работает там правильно, Поэтому я подозреваю, что любой из шаблонов, modernizr и т. Д., Которые я использую на текущей странице, Но я проверил все, что мог придумать, и не смог найти причину.

Firebug показывает мне, что, по-видимому, все тело смещено ровно на 2em. Если я добавлю «top: -2em» в CSS, он идеально совпадет с верхней частью страницы. Но это в лучшем случае обходной путь, и я хотел бы понять, что здесь происходит.

1. Спасибо, приведенные ниже ответы все нашли место, где что-то пошло не так. Я нашел и другое решение: добавление «float: left» в #logo div также устраняет проблему. Но переполнение пока кажется лучшим решением.

2. Не используйте такие хаки. Вам нужно понимать CSS, а не взламывать его.

3. что вы имеете в виду под взломами? какое ваше предпочтительное решение?

4. Причина, по которой у вас белая полоса вверху, заключается в том, что #logo элемент и элемент H1 имеют поля. Похоже, вы не заметили, но я опубликовал ответ ниже, в котором подробно описывается, что вызывает проблему, и какие изменения необходимо внести, чтобы устранить проблему.

5. Я заметил. Теперь я сделал это своим предпочтительным ответом.

Ответ №1:

Проблема связана с #logo DIV и элементом H1. Оба имеют поля, которые (в совокупности) создают эту белую полосу.

Удалите поля из #logo элемента и используйте отступы для H1.

Обновить:

Другим способом было бы:

удалить margin из #logo
добавить padding в #logo
установлено margin:0 значение H1
удалить line-height:0.5em из #logo

Результат:

Кстати, я рекомендую вам включить сброс YUI CSS (или какой-либо другой лист сброса) на вашу страницу.

Ответ №2:

У вас есть верхнее поле для h1 элемента.

 h1 { margin: 0 0 10px; }

Ответ №3:

просто добавьте это в класс заголовка css .

 header {overflow: hidden;}