html - why float & inline-block cause different vertical type?

Question

Here is my case code.

I create a div which contain element i. The i has width and height attribute and I achieve it with different way. So ,I encounter the line-height issue. I know a little about float vs inline-block. But, What cause out the line-height in my case?

Answer 1

inline-block is treated as an inline element (like text). If it is taller than other inline elements in the same line, it forces the line-height to be taller. You can use vertical-align:top|middle|bottom; to change the alignment of the inline-block element (more options for vertical-align here: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align).

A floated element is just pushed to one side or the other, and the text flows around it.