inline

인라인 속성은 엘리먼트의 크기만큼 공간을 차지한다. 대표적으로 span 태그와 a 태그가 있다. 인라인 속성을 가지면 크기만큼 위치하기 때문에 예를들어 p 태그안에 span 태그를 넣어 span 태그만 다른 css 속성을 줄 수도 있다.

span태그에 color: red;와 border: 1px solid red; 속성을 주었다.
이처럼 해당 span 태그의 텍스트만큼 공간을 차지 하기 때문에 간격이 넓어진다던가 하는 일은 생기지 않는다.

inline-block

inline-block 속성은 inline 속성과 거의 비슷하게 동작한다. 하지만 inline 속성과 달리 width와 height 속성을 줄 수 있다.

span 태그에 display: inline-block 속성을 주고 높이와 너비를 지정해주니 그만큼 늘어난다. 하지만 display: inline-block속성을 주지 않으면 동작하지 않는다.

block

block속성은 새 줄에서 시작해 브라우저의 크기만큼 공간을 차지한다.
대표적인 태그로는 p 태그와 form 태그 header 태그 footer 태그 section 태그등이 있다.

이런식으로 브라우저의 한 줄 전체를 차지하는 것을 볼 수 있다.