inline-table: The inline-table value does not have a direct mapping in HTML. It behaves like a

HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.

Bạn đang xem: Display inline-block là gì

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 lượt thích a replaced element would).

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

html css
nội dung
Improve this question
edited Nov 26 "15 at 1:29

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
địa chỉ cửa hàng a comment |

3 Answers 3

Active Oldest Votes
Both inline-block và inline-table have an inline outer display role. That means

The element generates an inline-level box.

Xem thêm: Học Thuộc Những Câu Tặng Tiếng Anh Là Gì Khi Trao Và Nhận Quà

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 & 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 và 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.

Some examples:

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.

.itable display: inline-table;.iblock display: inline-block;.cell display: table-cell;.wrapper > span border: 1px solid #000; padding: 5px; inline-table
table-cell inline-block table-cell
table-cell inline-block table-cell

Leave a Reply

Your email address will not be published. Required fields are marked *