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

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

14 голосов
/ 06 мая 2011

В верхней части моего сайта есть пробел в 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, за которым следует контейнер (который включает контент).

Ответы [ 7 ]

17 голосов
/ 06 мая 2011

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

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

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

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

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

4 голосов
/ 28 декабря 2011

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

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

function my_function_admin_bar(){ 
  return false; 
}
add_filter( 'show_admin_bar' , 'my_function_admin_bar');
1 голос
/ 20 апреля 2013

Моя проблема была WAS: 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>

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

1 голос
/ 06 мая 2011

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

0 голосов
/ 12 октября 2017

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

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

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

body{
margin: 0px;
padding: 0px;}
0 голосов
/ 22 августа 2015

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

Способ, которым я решил ее (по крайней мере, на данный момент), заключается в использовании: 

* {
    margin-top: 0;
}

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

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

Сэм

0 голосов
/ 06 мая 2011

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...