Css inline-block vs table-cell

В чем разница между встроенным блоком и табличной ячейкой?

Я нашел, что эти два стиля одинаковы. Что бы вы ни называли, например. text-align: center; vertical-align: middle; и т.д. путем идентификации display: inline-block; или display: table-cell; будет работать одинаково.

Пожалуйста, сообщите об основных отличиях.

Ответ 1

display: table-cell и display: inline-block; путают то же самое, но они имеют огромную разницу между ними. display: inline-block; не будет вести себя как display: table-cell; i.e встроенный блок будет вести себя как уровень блока, когда ваш браузер будет больше размера или если ваше содержимое превышает его ширину, а display: table-cell; не будет.

Вы можете увидеть различия между ними здесь

Вы также найдете разрыв между блоком, когда вы применяете display: inline-block;. Измените размер своего окна, нажав клавишу Ctrl и прокрутите с помощью кнопки прокрутки мыши, чтобы увидеть различия.

Обратите внимание, что vertical-align: middle; не работает как display: table-cell; в display: inline-block;. Если у вас есть рабочая демонстрация, пожалуйста, поделитесь ею.

Ответ 2

display:table-cell предназначен для использования внутри display:table-row, внутри внутри display:table. Неправильное использование приведет к созданию анонимных элементов, что может негативно повлиять на другие аспекты вашего макета.

При этом vertical-align имеет очень разные значения в обоих. В display:inline-block это относится к тому, как сам элемент выравнивается с окружающими элементами. С другой стороны, при display:table-cell он будет влиять на вертикальное выравнивание элементов внутри него.