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.
html css Share Improve this question Follow edited Nov 26 “15 at 1:29
Ajean 5,1501414 gold badges4242 silver badges6262 bronze badges asked Oct 14 “13 at 0:58
Steve BarnaSteve Barna 1,28833 gold badges1212 silver badges2222 bronze badges 2 Add a comment |
3 Answers 3
Active Oldest Votes 86 Both inline-block and inline-table have an inline outer display role. That means
The element generates an inline-level box.
Xem thêm:
The difference is that
However, in most cases, inline-table will behave like inline-block because of anonymous table objects:
Generate missing child wrappers:
If a child C of a “table” or “inline-table” box is not a proper table child, then generate an anonymous “table-row” box around C and all consecutive siblings of C that are not proper table children. If a child C of a “table-row” box is not a “table-cell”, then generate an anonymous “table-cell” box around C and all consecutive siblings of C that are not “table-cell” boxes.
Therefore, if your inline-table element has non-tabular content, that content will be wrapped in an anonymous table-cell.
And table-cell has a flow-root inner display model, just like inline-block.
But if the inline-table has tabular content, it will behave differently than inline-block.
Inside an inline-block, cells with non-tabular separator will generate different table anonymous parents, so they will appear at different lines. Inside an inline-table, it will be the separator who will generate a table-cell parent, so they all will appear at the same row.
By admin-honamphoto
Oct 14, 2021
