Alex van Alex van - 1 year ago 59
CSS Question

Inline-block not vertically aligning div-elements correctly

I've got a problem with Chrome.

I'm trying to vertically-align some

elements 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
onto different lines.

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

How can I avoid this?

Answer Source

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: and updated fiddle: