CODEWITHSUNDEEP
htmlcss
Mihai
Mihai

Reputation: 659

Div's with display inline-block display weird (CSS)

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

Upvotes: 0

Views: 491

Answers (1)

agconti
agconti

Reputation: 18093

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 .

Upvotes: 4

Related Questions