inline-table: The inline-table value does not have sầu a direct mapping in HTML. It behaves lượt thích a

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

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

inline-block: The element generates a bloông xã element box that will be flowed with surrounding nội dung 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-bloông chồng.

html css
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
Add a bình luận |

3 Answers 3

Active Oldest Votes
Both inline-blochồng và inline-table have sầu an inline outer display role. That means

The element generates an inline-level box.

Xem thêm: Clip Yến Vy Và Người Tình Phan Thanh, Cuộc Sống Của Yến Vy Hiện Tại Như Thế Nào

The difference is that

However, in most cases, inline-table will behave sầu 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 sầu 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 sầu siblings of C that are not "table-cell" boxes.

Therefore, if your inline-table element has non-tabular nội dung, that nội dung will be wrapped in an anonymous table-cell.

And table-cell has a flow-root inner display model, just lượt thích inline-bloông chồng.

But if the inline-table has tabular content, it will behave sầu differently than inline-bloông chồng.

Some examples:

Inside an inline-bloông chồng, 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-blochồng table-cell
inline-bloông chồng
table-cell inline-blochồng table-cell