23

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.

21

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.

1
  • Set line-height equal to element height and vertical-align will work for inline-block. – drruruu Jun 16 '14 at 20:45
15

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.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy