HTML - пространство между элементами

Добавьте в свой CSS следующее: есть поля, связанные с вашими элементами h1, hr и body:

h1 { margin:0; }
hr { margin:0; }
body { margin:0; }

ДЕМО: http://jsfiddle.net/4gq3b/3/

Вы можете использовать таблицу стилей Reset CSS. В принципе, это способ сохранить результаты как можно более универсальные, победив любые правила и пропуски на основе браузера, прежде чем ваш CSS будет применен.

Кроме того, я полагаю, у вас есть причина для установки #mainbox { width:1000px; } #mainbox { width:1000px; }, это выглядит немного странно. Все divs будут одинаковой ширины, если вы выберете атрибут width.

У браузера есть правила CSS, которые он применяет к веб-страницам по умолчанию, но способ, которым каждый поставщик браузера решает реализовать эти правила, несколько отличается. Итак, что вы испытываете, это правила по умолчанию из браузера.

Чтобы переопределить эти правила по умолчанию из браузера и устранить проблему, вы можете поместить эту строку в начало вашего файла CSS. Это установит для этих трех элементов значение 0.

h1, hr, body { margin: 0 }

Другим вариантом будет включение сброса CSS либо вверху вашего файла CSS, либо ссылки на него. Вот некоторые ресурсы, которые вы можете использовать, чтобы получить свой CSS на базовом уровне, и вы можете построить там: CSS Reset: http://meyerweb.com/eric/tools/css/reset/index.html и Normalize CSS: http ://necolas.github.io/normalize.css/

Теперь давайте поговорим о семантическом HTML:

В вашем коде вы используете таблицу для хранения того, что кажется навигационной панелью. Лучшим вариантом было бы использовать неупорядоченный список в вашем теге div или nav (который поставляется в html5), который будет в будущем доказательством и даст вам большую гибкость.

HTML будет выглядеть примерно так.

 <div id ="navig">
   <ul>
     <li>Reviews</li>
     <li>Upcoming</li> 
     <li>Xbox 360</li> 
   </ul>
 </div>

или:

  <nav ="navig">
   <ul>
     <li>Reviews</li>
     <li>Upcoming</li> 
     <li>Xbox 360</li> 
   </ul>
  </nav>

CSS будет выглядеть примерно так.

 #navig {
   background-color: #970c0c;
 }

 #navig ul {
   margin: 0;
   padding: 0;
   text-align: center;
 }

 #navig ul li {
   display: inline;
 }

Совет CSS. Посмотрите, как вы четыре раза выписывали маржу? Его можно записать в строке с номером, соответствующим верхнему, правому, нижнему, левому margin: 0 0 0 0; , И ясность относится к плавающим элементам, чтобы вы могли отбросить это тоже.

#upbox {
  background-color: #1e1e1e;
  /*four into one*/
  margin: 0 0 0 0;
  clear:none;
}

Надеюсь, все это поможет: Happy Coding !!

Вы также должны отрегулировать поля элементов уровня блока внутри своих div:

 #upbox h1{ margin: 0; }

Очевидно, что те перерывы, которые у вас есть в #mainbox также создадут пробелы.