css & html5: почему у моего тела расстояние вверху? - PullRequest
15 голосов
/ 10 августа 2011

Я не понимаю. У меня есть ...

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

Однако мой браузер всегда показывает вертикальную полосу прокрутки, даже если содержимое не такое высокое, как у окна.

На следующем скриншоте вы можете видеть, что сверху есть небольшой интервал, если я проверю body. html не имеет этого интервала.

Есть идеи, что может вызвать это?

enter image description here

Ответы [ 4 ]

44 голосов
/ 10 августа 2011

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

Читайте о сворачивающихся полях .

Чисто как простой тест , установите padding: 1px на body.Если пропасть исчезнет, ​​я прав.

1 голос
/ 05 августа 2016

Поздно для разговора, но подумал, что это может помочь некоторым ...

Если это сайт на WordPress, вполне вероятно, что WordPress добавляет:

 html { margin-top: 32px !important; }

Это делаетэто для того, чтобы освободить место для админ-панели, которая, по-видимому, по какой-то причине не отображается.

Чтобы решить эту проблему, добавьте в файл functions.php вашей темы следующее:

add_filter('show_admin_bar', '__return_false');
0 голосов
/ 27 марта 2018

У меня было это по совершенно другой причине: я случайно вставлял текстовые символы (в частности, точки с запятой) в голову, которые каким-то образом переводились в тело, где они были скрыты другой разметкой и / или CSS. Но место осталось.

В моем случае ни само тело, ни какие-либо очевидные элементы первого потомка не имели верхнего поля или отступов. Дополнительный текст действительно был первым (текстовым) потомком тела, однако он не совсем соответствовал тексту, который мне нужно было удалить, чтобы решить проблему. В частности, я увидел следующий текст с большим количеством лишних пробелов:

<body>
";




<!-- rest of stuff here -->

Обратите внимание, что я использую шаблонизатор HTML (в частности, Razor), поэтому все ставки отключены, чтобы как произошло это преобразование из ; ; в ";.

0 голосов
/ 10 августа 2011

1001 * попробовать *

body {
margin: 0;
padding: 0;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...