Блочные элементы CSS, создающие промежутки между элементами div - PullRequest
Новая
       6

Блочные элементы CSS, создающие промежутки между элементами div

2 голосов
/ 05 августа 2010

У меня проблемы с пробелами между блоками div: 

<div id="maincontentwrapper" >
  <img src="images/content-top.png" alt="main content border image" border="1" />
  <div id="maincontent" >
    <div id="pagecontent">
       <h1>Mission Statement</h1>
    </div>
  </div>
  <img src="images/content-bottom.png" alt="main content border image" />
</div>

Это создание страницы с полноразмерным изображением. Все хорошо, однако, как только я ввожу элемент уровня блока внутри pagecontent, например, заголовок, как показано, затем появляется пробел между изображением content-top.png и div основного содержимого.

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

Это (соответствующий) css: 

img {
 margin: 0;
 padding: 0;
}
#maincontentwrapper { 
}
#maincontent {
 background-image: url('../../images/content-main.png');
 background-repeat: repeat-y;
 min-height: 300px;
 width: 757px;
}
#pagecontent {
 width: 625px;
 margin-left: auto;
 margin-right: auto;
}

Спасибо за любую помощь

Ответы [ 5 ]

3 голосов
/ 05 августа 2010

Это, вероятно, поле, применяемое браузером по умолчанию.Попробуйте свой код с добавлением 

h1 { margin: 0; }

в CSS.Помогает ли это?

(элемент h1 - не единственный элемент уровня блока, который "страдает" от этого, p также имеет поля по умолчанию в большинстве браузеров.)

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

.maincontent :first-child, .maincontent :first-child :first-child {
    margin: 0;
}

, который установит для первого дочернего поля значение 0, независимо оттип элемента.

Что еще вы могли бы сделать, это применить "таблицу стилей сброса" , которая отменяет настройки браузера по умолчанию, маскируя их нулями.Однако я бы не советовал вам этого делать, поскольку настройки браузера по умолчанию в большинстве случаев имеют смысл, и их сброс может привести к неприятным последствиям.

0 голосов
/ 14 августа 2013

Тег <img /> по умолчанию отображается как встроенный.Попробуйте display: block.

0 голосов
/ 05 августа 2010

Может быть, потому что поля рушатся.Попробуйте добавить 

padding: 0 1px 0 1px;

к img или div или к обоим.

0 голосов
/ 05 августа 2010

Я бы сказал, что это проблема из-за настроек CSS по умолчанию в браузере, например, примененных к h1 p и т. Д.

Один из способов избавиться от этого - использовать некоторые "сбросить" CSS, как в 960grid: здесь

Судя по моему опыту, работает нормально :)

0 голосов
/ 05 августа 2010

Вы пробовали другой элемент, чем H1?Я считаю, что проблема в том, что элемент H1 имеет поля по умолчанию, и, возможно, именно это «толкает» div и оставляет пробел.Кстати, вы используете плагин Firefox Firebug для тестирования CSS?Он действительно мощный и позволяет изменять на лету.

...