25

What are the differences between inline-block and table-cell?

I have found these two styles are the same. Whatever you style for eg. text-align: center; vertical-align: middle; etc. by identifying display: inline-block; or display: table-cell; would work the same.

Please notify the key differences.

2 Answers 2

22

display: table-cell and display: inline-block; are confusing the same but it has huge difference between them. display: inline-block; will not behave as the display: table-cell; i.e. inline-block will behave as the block level when your browser will be re-sized larger or if your contents exceeds than its width while display: table-cell; won't.

You can see the differences between them here

You'll also find the gap between block when you apply display: inline-block; Re-size your window by pressing Ctrl key and scrolling with mouse scroll button to see differences.

Notice the vertical-align: middle; is not working as display: table-cell; in display: inline-block;. If you have working demo please share one.

Sign up to request clarification or add additional context in comments.

1 Comment

Set line-height equal to element height and vertical-align will work for inline-block.
19

display:table-cell is intended for use inside a display:table-row, itself inside a display:table. Improper use will result in anonymous elements being created, which may interefere negatively with other aspects of your layout.

That being said, vertical-align has very different meanings in both. In display:inline-block, it refers to how the element itself aligns with the surrounding elements. On the other hand, with display:table-cell, it will affect the vertical alignment of elements inside it.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.