📌 inline
인라인 스케이트를 생각하면 쉽다. 인라인 요소는 앞이나 뒤에 줄 바꿈을 생성하지 않는 하나 이상의 인라인 요소 상자를 생성한다. 정상적인 흐름에서 공백이 있는 경우 다음 요소는 같은 줄에 있다.
📌 block
block 속성은 inline과는 달리 한 줄에 나열되지 않고 그 자체로 한 줄을 완전히 차지하며 기본적으로 width:100% 속성을 가진다.
block 태그:
- header
- footer
- p
- li
- table
- div
- h1
📌 inline-block
inline-block은 말그대로 inline의 특징과 block의 특징을 모두 가진 요소이다.
inline-block의 특징:
- 줄바꿈이 이루어지지 않는다
- block처럼 width와 height를 지정 할 수 있다
- 만약 width와 height를 지정하지 않을 경우, inline과 같이 컨텐츠만큼 영역이 잡힌다
사진 출처:
4대륙 개발자