Inline element alignment: Display:inline-block;

Inline element alignment: Display:inline-block;

Today I see a line of elements arranged horizontally, but not aligned,

Code:

        div{border:1px solid red;}. Wrap > Div{display:inline-block;width:200px;height:200px;background:green;}        <div class= "wrap" ><div class= "One1" > This is Content 1</div><div class= "One2" ></div><div class = "One3" > This is Content 2</div><div class= "one4" > Suitable content 3</div></div>

Cause of the problem: because the arrangement of the elements in the line is formatted according to a horizontal baseline, you can use Vertical-align to resolve:

This will solve a lot of problems, typesetting is also very good. But I think this has something to do with text: If you don't add vertical-align, the parent Div will be higher:

Will this be related to overflow? After all, the text will have something to do with this, I add:

aligned, and the same as the vartical-align:bottom effect.

Reason:

Inline element alignment: Display:inline-block;