0

I worked at a template and i tried to use display: inline-block; to arange the divs on page and i observed a behaviour that i couldn't explain. The div's with display: inline-block; containing some element like : span, div or a are displayed below than without something inside.

I looked with Firebug but there is not a margin or padding arround that could explain the spacing.

This behaviour is fix only if i display the span, div or a as :

  1. table-cell // Chrome Firefox IE9
  2. table-row // Chrome Firefox IE9
  3. flex // Only Firefox
  4. table// Chrome Firefox IE9

Can someone provide more details or some advice aboud this behaviour.

jsFiddle

Mihai
  • 631
  • 1
  • 14
  • 30

1 Answers1

4

Add vertical-align: top to your divs like so:

div {
    vertical-align: top;
}

Demo in a fiddle: http://jsfiddle.net/85StK/5/

This homogenizes the vertical alignment of the div's making a them all display inline .

agconti
  • 17,780
  • 15
  • 80
  • 114