CODEWITHSUNDEEP
htmlcss
Dusan
Dusan

Reputation: 5144

Why are inline block elements misaligned?

Problem

Inside a div with vertical-align: top; I have two elements, an img and a span (with aaa inside).

Both elements have display: inline-block; and width and height set.

No matter what I do and what I try, the elements are MISALIGNED as shown on picture below. What is wrong and how can I fix this?

This problem occurs in every browser - FF, IE, Safari ... http://jsfiddle.net/CaU59/

Upvotes: 5

Views: 4983

Answers (2)

James Montagne
James Montagne

Reputation: 78630

You need to add vertical-align to the elements themselves, not their container. They are currently aligned baseline as you can see from the text lining up with the image.

http://jsfiddle.net/CaU59/2/

Upvotes: 18

Kevin Lynch
Kevin Lynch

Reputation: 24703

vertical-align: top is to be added to each element

DEMO http://jsfiddle.net/CaU59/1/

Upvotes: 11

Related Questions