[CSS] display: inline 과 inline-block 차이

display: inline 하고
display: inline-block 차이

display: inline
= 딱 자기 컨텐츠 영역만 차지
= 가로 정렬이 된 것처럼 보임.
= 높이가 지정이 안됨.
- 높이를 지정해도 설정이 되지 않음.


display:inline-block
- 자기 컨텐츠 만큼 차지
- 높이 값 지정 가능
= 인라인 요소지만, 블록 속성 가짐.
= 높이 값을 바꿔주지 못했던 기존 인라인 요소와 달리
블록 속성이 추가돼서 하위 값을 지정할 수 있음.
= 인라인 요소기 떄문에 자기 컨텐츠 만큼 차지를 해서 가로 정렬처럼 보임.
= 중간에 인라인 요소가 끼어든다면,
해당 요소에 높이값은 지정되지 않은 채 차이를 보이게 됨.