Разрыв в верхней части страницы, несмотря на поля:0 и отступы:0

Question

В верхней части моего сайта есть разрыв в 32 пикселя, несмотря на то, что поля и отступы равны 0. Я знаю, что это 32 пикселя, потому что я могу исправить это с помощью отступов: -32px. Но тогда у меня разрыв внизу! В Firebug кажется, что тело начинается с 32px вниз от начала HTML-элемента, хотя я установил поля и отступы равными 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, за которым следует контейнер (который включает контент).

Answer 1

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

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

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

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

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

Answer 2

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

Добавьте это в ваш functions.php, чтобы избавиться от него:

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

Answer 3

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

Я решил это (по крайней мере, на данный момент), используя:

* {
    margin-top: 0;
}

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

Это устанавливает верхнее поле КАЖДОГО элемента на ноль, так что используйте это с пониманием этого, и может потребоваться определение свойства margin-top снова и снова.

Сэм

Answer 4

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

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

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

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

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

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

Answer 5

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

Answer 6

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

Answer 7

Если этот div был insine body (например, или любой другой div), установите margin и padding для 0px; и это должно хорошо работать

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

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

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