DOCUMENTS

Record
  • account_tree
  • bug_report

img 태그의 inline vs inline-block

img 태그는 width, height 값을 가질 수 있다. 따라서 inline-block 수준을 만족하는 요소라 할 수 있지만 실제로 웹브라우저에서는 inline 수준으로 다룬다.

지금까지는 img 태그는 display의 기본 값을 inline-block 이라 다루어왔다. 근거는 가로와 세로 크기를 가질 수 있다는 것과 텍스트처럼  흐름을 가지고 있다는 것이다. 하지만 웹브라우저에서는 inline이라고 말한다.

팩트 관점에서 보면 inline 요소는 크기를 가질 수 없다. 그런데 왜 img 요소는 크기를 갖는가? 더군다나 다른 텍스트의 흐름과는 어울리지 않는다. 이 사실은 우리를 혼란스럽게 한다.

외부 리소스

Is <img> element block level or inline level?
스택오버플로우에 올라온 이미지 태그에 대한 display 값 이슈