HTML-пространство между divs

Question

Я создал свой сайт из 3-х разделов, но у меня есть раздражающая проблема между моими div. У меня есть пространство, которое я не хочу. Это разметка моего веб-сайта:

<div id="upbox"> 
    <h1 class="headline1">...</h1> 
    </div> 
     <div id="navig"> 

      <table align="center" cellspacing="0" width="60%" cellpadding="0" dir="ltr"> 
       <tr> 
        <td><a href =url> home </a></td> 
        <td><a href =url> Reviews </a></td> 
        <td><a href =url> Upcoming </a></td> 
        <td><a href =url> Xbox 360 </a></td> 
        <td><a href =url> Xbox One </a></td> 
        <td><a href =url> PS3 </a></td> 
        <td><a href =url> PS4 </a></td> 
        <td><a href =url> PC </a></td> 
        <td><a href =url> Contact Us </a></td> 
       </tr> 
      </table> 

     </div> 
    <hr /> 

    <div id="mainbox"> 
    <br/> 
    <br/> 
    <p class="imgfirst"><img src="Images\characters.jpg" width="70%"></p> 

    </div> 

И мой КСС:

#mainbox { 
    width: 1000px; 
    margin:0 auto; 
    background-color: white; 
    border: 2px solid; 
    border-color: #970c0c; 
} 

#upbox { 
    background-color: #1e1e1e; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    margin-left: 0px; 
    clear:none; 
} 

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

Я попробовал все, но это не помогает. Что я могу сделать?

Это мой текущий результат.

Answer 1

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

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

DEMO: http://jsfiddle.net/4gq3b/3/

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

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

Answer 2

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

#upbox h1{ margin: 0; } 

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

Answer 3

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

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

h1, hr, body { margin: 0 } 

Другим вариантом было бы включать в себя CSS сбросе либо в верхней части файла CSS или ссылки. Вот некоторые ресурсы, которые вы можете использовать, чтобы получить CSS к базовой линии, и вы можете создать оттуда: CSS Reset: http://meyerweb.com/eric/tools/css/reset/index.html и Нормализация 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 !!