White space above display:inline-block divs

Question

I'm developing a website and I'm having difficulties understanding why on earth this is happening:

https://i.stack.imgur.com/hxArz.png

Here is my html for the content 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>

Here is the css that is computed by google chrome (the relevant 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;
 }

I've noticed that if I remove some of the text in the paragraphs, the space will increase / decrease and if I move the divs around a bit (by changing their width) I move the space. If I make col1 small enough, col2 will have the spacing above it..

Any ideas?

EDIT: jsfiddle does this as well: http://jsfiddle.net/jjY64/

Solution

As NoobEditor points out, all I had to do was vertical align col1 to top instead of the default bottom.

score 10 · Accepted Answer · answered Jan 29 '14 at 11:34

10

add vertical-align:top; to div#col1

working demo

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

answered Jan 29 '14 at 11:34

NoobEditor

15,563
19
81
112

I JUST noticed this as well! Col1 is positioned with valign:bot as default apparently. Thanks! – Bjørn Zeiler Jan 29 '14 at 11:35
1

@BjørnZeiler : welcome....mind marking answer as accepted or upvoted??? :) – NoobEditor Jan 29 '14 at 11:36
I'd love to, but I need 2 more rep before I can do that :( so if you want that you should upvote my question :3 – Bjørn Zeiler Jan 29 '14 at 11:37
@BjørnZeiler : i guess u upvoted already....marking accepted closes the answer!! :) – NoobEditor Jan 29 '14 at 11:41

Rohit Azad Malik · Answer 2 · 2014-01-29T11:40:44.870

0

Define your parent font-size:0; and child define font-size:12px; as dependent your design

Used to this

      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;
        }

Live Demo http://jsfiddle.net/jjY64/2/

edited Jan 29 '14 at 11:40

answered Jan 29 '14 at 11:35

Rohit Azad Malik

31,410
17
69
97

Doesn't fix it. Check NoobEditor's answer above! – Bjørn Zeiler Jan 29 '14 at 11:39

White space above display:inline-block divs

2 Answers2