<CSS> display: inline 과 inline-block 차이 / 인라인 인라인블록 차이

inline은 CSS를 공부하는 초기부터 block과의 비교대상으로서 익숙히 들어온 코드입니다.
그리고 inline-block은 아마도 코드를 짜는 과정에서 체득하게 되는 코드입니다.

{ display: inline; }

대표적으로 <span>이라는 태그의 성질로 content/text 크기만큼만 점유하고
동일 라인에 붙는 성질입니다.
'이 글씨는 두꺼운 효과를 주었다.'와 같이 text 내에 특정 부분에만 스타일을 간단히 줄때 많이 사용되죠.
- width/height 적용 불가
- margin/padding-top/bottom 적용 불가
- line-height 원하는 대로 적용 불가(span에 적용안되고 감싸고 있는 div 전체 크기에만 영향 등)

{ display: block; }

반면 block은 무조건 한줄을 점유하고, 다음 태그는 다음 줄로 가버리죠.

{ display: inline-block; }

2개의 짬뽕입니다. 제일 중요한 성질 자체는 inline과 비슷합니다.
동일 라인에 여러 태그를 붙일 때 쓸 수 있습니다. 
다만 위 inline의 단점들을 커버하는 것이 inline-block입니다.
- width/height 적용 가능
- margin/padding-top/bottom 적용 가능
- line-height 적용 가능
다만 고려해야 할 것이 있습니다.
- inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결이 됩니다.
- inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춰주시면 됩니다. 

그래서 결론은? 그렇다면 무조건 inline-block 쓰는게 낫지 않나?

디테일한 보정이 필요하고 예민하신 분들은 inline-block 쓰시는게 낫고,
text 내의 특정 부분 스타일 등 간단한 것들은 그냥 inline 쓰시면 됩니다.

inline 쓴다는 것은 <span>을 그냥 쓰는 것을 뜻하고(default 값이기 때문에), inline-block은 따로 div 등에 display: inline-block 속성 코드를 타이핑하고 여타 속성에 신경을 써줘야한다는 것을 뜻합니다.(손이 좀 더 간다~ 뭐 이 정도입니다.)

[출처] <CSS> display: inline 과 inline-block 차이 / 인라인 인라인블록 차이|작성자 삼계탕