inline

span, a, img 태그 등이 inline 요소입니다.
inline 요소는 요소끼리 서로 한 줄에, 바로 옆에 위치할 수 있습니다.

inline 요소는 너비와 높이가 딱 내부 컨텐츠(주로 텍스트) 크기만큼 설정되며,
width, height로 크기를 지정할 수 없습니다.
padding, margin을 주면 좌우에만 적용 되고, 위아래는 적용되지 않습니다.

block

대부분의 HTML 요소는 block 요소입니다.
header, footer, p, li, table, div태그 등이 모두 block 요소에 해당합니다.
block 요소는 inline과 다르게 요소 바로 옆(좌우측)에 다른 요소를 붙여넣을 수 없습니다.
즉, 한 줄에 하나의 블록 요소만 위치할 수 있습니다.

block 요소는 위 그림과 같이 스크린에 보이는 너비만큼의 최대 너비를 가집니다. 높이는 내부 컨텐츠의 높이만큼 가지죠.
하지만 width, height로 크기를 마음대로 지정할 수 있습니다.
또한 padding, margin으로 상하좌우 전부 여백을 지정할 수 있습니다.

inline-block

inline-block은 display:inline-block;을 선언하여 지정할 수 있습니다. inlin-block 요소는 inline과 block의 특징을 모두 가집니다.

inline요소처럼 너비와 높이가 내부 컨텐츠 크기만큼 설정되지만,
block 요소처럼 width와 height로 너비와 높이를 설정할 수 있습니다.
또한 block 요소처럼 padding과 margin으로 상하좌우 여백을 모두 줄 수 있습니다.
다만 inline 요소처럼 여러 요소가 있을 때는 한 줄에 나타납니다.

inline-block은, block인 요소들을 한줄에 배치하면서도 크기를 조절해야 하거나, padding, margin으로 여백을 주어야 할 때 사용하게 됩니다.
inline과 block의 속성이 모두 필요할 때 inline-block을 지정해줍니다.