Белое пространство над дисплеем: встроенный блок дивы

Question

Я занимаюсь разработкой веб-сайт и у меня возникают трудности с пониманием, почему на Земле это происходит:

http://i.imgur.com/DABPnlM.png

Вот мой HTML для DIV контента:

<div id="content" style="display: block;"> 
<div id="col1"> 
    <h1>Prosperity Construtora E Incorporadora</h1> 
    <p>[...] text [...]</p> 
    <p>[...] text [...]</p> 
</div> 
<div id="col2"> 
    <h1>Empregos na Prosperity</h1> 
    <p>[...] text [...]</p> 
    <h1>Fotos de trabalhos realizados</h1> 
    <p>[...] text [...]</p> 
</div> 

Вот CSS, который вычисляется с помощью Google Chrome (соответствующий CSS):

div#content { 
     height: auto; 
     margin: 15px auto 0 auto; 
     width: 800px; 
     text-align: left; 
     padding-bottom: 23px; 
} 

div#col1 { 
     display: inline-block; 
     width: 510px; 
} 

div#col2 { 
     display: inline-block; 
     width: 260px; 
} 

Я заметил, что если я удалю часть текста в абзацах, пространство будет увеличиваться/уменьшаться, и если я перемещаю divs немного (меняя их ширину), я перемещаю пространство. Если я сделаю col1 достаточно маленьким, col2 будет иметь промежуток над ним.

Любые идеи?

EDIT: jsfiddle делает это так: http://jsfiddle.net/jjY64/

Решение

Как NoobEditor указывает, все, что я должен был сделать вертикальное выравнивание col1 к началу вместо нижней части по умолчанию.

Answer 1

добавить vertical-align:top; к div#col1

working demo

div#col1 { 
display: inline-block; 
width: 510px; 
border:1px solid red; 
vertical-align:top; 
} 

Answer 2

Определить ваш родительскийfont-size:0; и ребенка определяютfont-size:12px;, как зависит ваш дизайн

Используется для этого

 div#content { 
       font-size:0; 
     } 

     div#col1 { 
    display: inline-block; 
vertical-align:top; 
      font-size:12px; 
     } 

     div#col2 { 
    display: inline-block; 
vertical-align:top; 
       font-size:12px; 
     } 

Демо http://jsfiddle.net/jjY64/2/