inline

display 속성이 inline으로 지정된 요소는 줄바꿈 없이 한 줄에 나란히 배치됩니다. inline 속성으로 span, a, br, button, img, input, label, span, textarea이 있습니다.
그리고 text-align으로 텍스트의 중앙, 좌,우측 정렬을 할 수 있습니다.

css 명령어인 display:block으로 인라인 요소를 블록 요소의 속성으로 변경할 수 있습니다.

<span>L</span>
<span>e</span>
<span>t</span>
<span>s</span>
<span>G</span>
<span>o</span>
<span>J</span>
<span>a</span>
<span>e</span>

크롬 검사창에서 inline으로 설정되어 있는 것을 볼 수 있습니다.

block

display속성이 block으로 지정된 요소는 줄바꿈이 들어가 있어 다른 요소들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.
대표적인 block요소는 div, p, h1~h6태그 등을 사용할 수 있습니다.

block 요소는 inline 요소와 다르게 width, height, margin, padding 속성을 모두 반영할 수 있습니다.

                        <div>L</div>
                        <div>e</div>
                        <div>t</div>
                        <div>s</div>
                        <div>G</div>
                        <div>o</div>
                        <div>J</div>
                        <div>a</div>
                        <div>e</div>                 

크롬 검사창에서 block으로 설정되어 있는 것을 볼 수 있습니다.

inline-block

display 속성이 inline-block으로 지정된 요소는 기본적으로 줄바꿈 없이 한 줄에 다른 요소와 같이 배치됩니다.
하지만 inline 요소에서 불가능 하던 width와 height / margin과 padding 속성을 사용할 수 있습니다.

대표적으로 inline-block 요소는 button, select태그 등을 볼 수 있습니다.

inline-block 요소는 해당 요소의 스타일을 display: inline-block로 지정해줘야 합니다.
inline-block을 이용하면 여러 개의 요소를 한 줄에 정확히 원하는 너비만큼 배치할 수 있기 때문에 레이아웃에 활용할 수 있습니다.