Пробел вверху страницы, несмотря на margin: 0 и padding: 0

Там пробел 32px в верхней части моего сайта, несмотря на установку полей и paddings на 0. Я знаю, что 32px, потому что я могу исправить его с заполнением: -32px. Но тогда у меня есть пробел внизу! В Firebug кажется, что тело только запустило 32px вниз от начала элемента HTML, хотя я установил поля и paddings равными 0.

Вот мой CSS:

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

body { 
  background-color: #a7a9ac; 
  color #666666;
  background-image: url('body-bg.gif');
  background-repeat: repeat-x;
  height: 100%;
  padding: 0;
  margin: 0;
}

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
}

.container_banner h3{
  position: relative;
  top: 0px;
  left: 32px;
  font-size: 10px;
  color: #F8F8F8;
}

.container_banner{
  position: relative;
  top: 0px;
  background-image: url('banner.png');
  background-repeat: no-repeat;
  margin: 0 auto;
  width: 945px;
  height: 188px;
  padding: 0px;
  background-color: #ffffff;
}

.container{
  position: relative;
  top: 0px;
  margin: 0 auto;
  min-height: 100%;
  width: 945px;
  padding: 0px;
  padding-top: 20px;
  margin-bottom: 0px;
  background-color: #ffffff;
  background-image: url('thin-background.png');
}

.content{
  margin-top: 0px;
  margin-left: 30px;
  min-height: 100%;
}

Контейнер-баннер - это самый верхний div, за которым следует контейнер (включая контент).

Ответы

Ответ 1

Я думаю, что это вызвано использованием position: relative и вашего элемента h1, наследующего маркер по умолчанию. Когда вы используете позицию: относительная, маржа, похоже, не смещается с фактическим содержимым и поэтому применяется к верхней части страницы.

Я изменил соответствующий CSS, чтобы исправить это:

.container_banner h1{
  font-size: 48px;
  position: relative;
  top: 130px;
  left: 250px;
  width: 400px;
  margin-top: 0;
}

Возможно, вам понадобится сделать то же самое для любых других элементов, которые установлены в положение: относительные и имеют разность (например, h3-теги)

Лучше всего было бы сократить использование относительного положения, поскольку было бы трудно предсказать такое поведение.

Ответ 2

WordPress автоматически добавляет в панель администратора с помощью wphead(); Мы с вами, вероятно, каким-то образом удалили материал в админ-баре, поэтому он просто пуст, но если бы у нас остались данные панели администратора, он был бы там.

Добавьте это в свои функции .php, чтобы избавиться от него:

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');

Ответ 3

Я не совсем уверен, что вы имеете в виду, но я полагаю, что ваша проблема либо будет связана с некорректным HTML (убедитесь, что вы используете правильный doctype), либо правило padding-top: 20px; в вашем container класс.

Ответ 4

Моя проблема WAS: тег H2 html, который был первым дочерним тегом DIV, вызвал разрыв над div.

Такой разрыв, который я ожидал бы, использовал бы свойство css 'margin (-top)'. Однако DIV не имел (унаследованного) "margin (-top)" CSS-свойства.

Удаление ребенка H2 удаляет неожиданный разрыв, но не является хорошим решением.

То, что действительно решает проблему, - это установка свойства CSS "display" для DIV для "встроенного блока". Вы можете использовать H2 (или Hx) без нежелательного зазора, как следствие.

<div style="display:inline-block">
  <h2>blabla</h2>
</div>

Надеюсь, это ответ, который решает вашу проблему!

Ответ 5

Или у вас есть ошибка в CSS, color #666666. Между ними нет :. Возможно, это приводит к тому, что CSS не обрабатывается неправильно.

Ответ 6

если этот div был телом insine (например, или любым из div) установленным полем и дополнением для 0px; и он должен хорошо wrok

<body>
<div class="div_with_gap">
</div>
</body>

и он должен исправить его

body{
margin: 0px;
padding: 0px;}

Ответ 7

У меня была такая же проблема.

Как я его разрешил (по крайней мере пока), используя:

* {
    margin-top: 0;
}

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

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

Сэм