CSS 의 display 속성은 웹 상에서 각 요소들이 어떻게 보여주고 서로 상호 배치되는지를 결정합니다. 여러가지 속성이 있는데 inline inline-block block 이 대표적입니다.

display: inline - 문자 처럼 한줄에 가로로 배치되는 요소
display: block - 블록이 쌓이듯 좌우 영역을 다 차지하며 세로로 배치되는 박스 형태
display: inline-block - 위 두가지 형태의 결합, 가로로 배치되지만 박스 형태처럼 길이나 간격을 지정할 수 있음

inline

인라인 태그에는 span a em 등 있습니다. 태그를 여러개 생성했을 때 해당 요소가 문자열처럼 한줄에 나열된다면 inline 요소입니다. 긴 줄글에서 한 단어나 문장에 스타일을 입힐 때 사용합니다. 사용자가 클릭해야 하는 아이콘이나 버튼등 크기르 조절해야 한다면 block 이나 inline-block 으로 속성을 바꾸고 사용합니다.

block

블록 요소인 태그로는 div p h1 등이 있습니다. 블록 요소는 박스모델이라고 해서
width height margin padding border 등을 지정할 수 있습니다. 별도의 길이를 지정하지 않으면 자식요소의 크기만큼 세로길이를 차지하고 가로 길이는 전체 길이만큼 늘어납니다.

inline-block

인라인 블록으로 지정하면 inline 요소처럼 가로로 배치되면서 block 요소처럼 박스모델의 설정값을 적용할 수 있습니다. 내부적으로는 block 의 규칙을 따르고 외부적으로 inline 의 규칙을 따릅니다. 대표적인 인라인 블로그 요소로는 button input select 등이 있습니다.

추가 내용은 MDN 참고