css 인라인 블록 대 테이블 셀

Question

인라인 블록과 테이블 셀의 차이점은 무엇입니까?

나는이 두 스타일이 동일하다는 것을 알았습니다. 당신이 예를 들면 어떤 스타일이든. text-align: center; vertical-align: middle; 등을 display: inline-block; 또는 display: table-cell;으로 식별하면 동일하게 작동합니다.

주요 차이점을 알려주십시오.

Answer 1

display:table-cell은 display:table 안에있는 display:table-row 내부에서 사용하기위한 것입니다. 부적절한 사용은 익명의 요소가 생성되어 레이아웃의 다른 측면에 부정적으로 작용할 수 있습니다.

즉, vertical-align은 둘 다 매우 다른 의미를 가지고 있습니다. display:inline-block에서는 요소 자체가 주변 요소와 어떻게 정렬되는지를 나타냅니다. 반면에 display:table-cell을 사용하면 내부 요소의 수직 정렬에 영향을줍니다.

Answer 2

display: table-cell 및 display: inline-block;은 혼동 스럽지만 큰 차이가 있습니다. 브라우저가 더 큰 크기가되거나 내용이 너비를 초과하는 경우 display: table-cell;은 display: table-cell;으로 동작하지 않습니다. 즉 인라인 블록은 블록 수준으로 동작합니다.

당신은 Ctrl 키를 눌러 차이를 볼 마우스 스크롤 버튼으로 스크롤하여 display: inline-block; 다시 크기 당신의 창을 적용 할 때 또한 블록 사이의 간격을 찾을 수 있습니다 그들 here

의 차이를 볼 수 있습니다.

vertical-align: middle;이 display: table-cell;으로 작동하지 않습니다. display: inline-block;입니다. 데모를 가지고 있다면 공유하십시오.