Search code examples
vertical-alignmentcss

Inline-block not vertically aligning div-elements correctly


I've got a problem with Chrome.

I'm trying to vertically-align some divelements using display: inline-block; instead of floating them. The problem occurs when I put some text into them: for a strange reason, Chrome displays differently filled divs onto different lines.

Firefox and IE are working correctly. For better understanding check this example

How can I avoid this?


Solution

  • You need to add for global wrapper font-size: 0; and set regular font size for your inline blocks, you can also add: letter-spacing: 0; and word-spacing: 0;, something like this:

    .wrapper {
      font-size: 0;
      letter-spacing: 0;
      word-spacing: 0;
    }
    
      .wrapper .inline_block {
        display: inline-block;
        font-size: 12px;
        letter-spacing: 1px;
        word-spacing: .1em;
        vertical-align: top;
      }
    

    and example fiddle: http://jsfiddle.net/3ab22/ and updated fiddle: http://jsfiddle.net/3ab22/3/