inline

inline은 요소를 구성하는 태그에 할당된 공간만 차지합니다.

• inline 요소는 새 줄에서 시작하지 않습니다.
• inline 요소는 필요한만큼만 너비를 차지합니다.
• 인라인 요소에는 위쪽 및 아래쪽 여백이 없습니다.
• ex) text내 strong 태그를 사용하면 해당 text만 강조되고, text간의 간격이나 줄바꿈이 일어나지 않는다.

인라인 요소 목록

block

block 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

• block 요소는 항상 새 줄에서 시작합니다.
• block 요소는 항상 사용 가능한 전체 너비를 차지합니다. (가능한 한 왼쪽과 오른쪽으로 확장)
• block 요소에는 위쪽 및 아래쪽 여백이 있습니다.
• ex) text내 p 태그를 사용하면 줄바꿈이 일어납니다.

블럭 요소 목록

inline-block

inline처럼 요소를 구성하는 태그에 할당된 공간만 차지하나, inline에서 불가능한 width와 height 속성 지정 및 margin과 padding 상하 지정이 가능합니다.

inline / block 요소 변경

css display property를 사용하여 변경할 수 있습니다.

• display: inline -> 인라인 요소로 변경
• display: block -> 블럭 요소로 변경
• display: flow-root -> 인라인-블럭 요소로 변경
  • display: inline-block은 legacy 참고

아래 Display 속성 변경 버튼을 클릭하면 변경되는 것을 확인 하실 수 있습니다.

마치며

블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용됐습니다. 이런 이진적 구분은 HTML5부터 보다 복잡한 콘텐츠 카테고리 집합으로 대체됐습니다. (후략)
블록 레벨 vs. 인라인 - MDN

위에 글과 같이 HTML5로 되면서 inline, block 요소로 분류하는 방식은 더 이상 사용되지 않는 것 같습니다.
따라서 inline/block 요소는 어떠한 태그들이 있다는 접근보다는 inline/block이 적용되면 어떻게 화면에 표현되는지에 대한 관점으로 바라보는 것이 좋을 것 같습니다.

Referenc

블록 레벨 요소 - MDN
인라인 요소 - MDN
HTML Block and Inline Elements - w3schools
display-outside keywords
display - block과 inline 그리고 inline-block