Steve Barna Steve Barna - 2 months ago 14
CSS Question

What is the difference between inline-block and inline-table?

As far as I can tell, these

display
selectors seem to be identical.

From the Mozilla CSS documentation:

inline-table
: The inline-table value does not have a direct mapping in HTML. It behaves like a
<table>
HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

inline-block
: The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would).

It seems that whatever could be done with
inline-table
can be done with
inline-block
.

Answer

display:table will make your tag behave like a table. inline-table just means that the element is displayed as an inline-level table. You can then do table-cell to let your element behave like a <td> element.

display:inline - displays your element as an inline element (like <span>), and inline-block will just group them together in a block container.

As the other answer suggested you can replace between the two as long as you follow the display convention in the rest of your code. (i.e. use table-cell with inline-table and not with inline-block).
Check this link for more info on display: https://developer.mozilla.org/en-US/docs/Web/CSS/display