CSS] display 속성 inline vs inline-block

inline 은 span,텍스트 과 같은 태그의 기본 속성 입니다
inline-block 은 img 와 같은 태그의 기본 속성 입니다

span 의 경우 현재 위치[행]의 적용된 텍스트 크기 font-size 를 기준으로 이어 나갑니다
자동 줄바꿈, 한행에서 이어붙임 등이 적용됨

img 의 경우 현재 블럭의 크기를 기준으로 이어나갑니다
자동 줄바꿈, 한행에서 이어붙임 등이 적용됩

span 예
<span>AAAAAAAAAAAA<span><span>TTTTTTTTTTT<br>TTTTTTTTTTTT</span>
AAAAAAAAAAAATTTTTTTTTTT
TTTTTTTTTTTT

span 예2
<div><span style="padding:16px 16px;background:#eee">test</span><span style="padding:8px 16px;background:#ccc">test</span><span style="padding:4px 16px;background:#bbb">test</span></div>

testtesttest

div display:inline-block 의 예
<div style="width:80px;height:24px;background:#eee;display:inline-block">test</div><div style="width:80px;height:32px;background:#ccc;display:inline-block">test</div><div style="width:80px;height:48px;background:#bbb;display:inline-block">test</div>

test

test

test