<img> 요소 블록 수준입니까 아니면 인라인 수준입니까?

163

나는 그 <img>요소가 둘 다처럼 행동 하는 곳을 읽었습니다 . 맞다면 누군가가 예를 들어 설명해 주시겠습니까?

html css image

— 언더 스택
소스

189

사실, 그것들은 둘 다 또는 더 정확하게는 "인라인 블록"요소들입니다. 즉, 텍스트처럼 인라인으로 흐르지 만 블록 요소와 같이 너비와 높이가 있습니다.

CSS에서 display: inline-block이미지의 동작을 복제하도록 요소를 설정할 수 있습니다 *.

이미지와 객체는 내용이 없기 때문에 "대체 된"요소라고도합니다. 요소는 본질적으로 이진 데이터로 대체됩니다.

* 브라우저는 기술적으로 display: inline(개발자 도구에서 볼 수 있듯이) 사용하지만 이미지에 특별한 처리를하고 있습니다. 그들은 여전히의 모든 특성을 따릅니다 inline-block.

— 불만을 품은 염소
소스

나는 항상 이미지가 인라인 블록이 아닌 인라인 요소라는 것을 읽었지만 너비와 높이를 추가 할 수 있기 때문에 이미지가 인라인 블록이 될 수 있습니다.

— Donato

22

이 답변은 기술적으로 정확하지 않습니다. 정확하게 말하면 img요소는 inline-block실제로 inline요소 가 아닙니다 . 이미지를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 클릭 한 다음 계산 된 스타일을 보면 최신 브라우저에서이를 확인할 수 있습니다 display: inline. 태그 내부에 블록 컨텍스트가 없으므로 호출하는 것이 올바르지 않습니다 inline-block. 대체 인라인 요소에 대한 자세한 내용은 다음을 참조 쿠엔틴의 대답 과 이 MDN 문서를 .

— Maximillian Laumeister

@Max의 링크는 대체 된 요소가 인라인되는 것에 대해 아무 것도 말하지 않습니다.

— DisgruntledGoat

@DisgruntledGoat 내가 게시 한 링크에서 img요소가 인라인 이라고 말하지는 않습니다. Chrome 개발자 도구는 img요소를 인라인으로 표시합니다. 이 게시물은 지금까지 내가 찾은 유일한 장소 inline-block입니다. 흥미롭게도, 나는 그들 중 inline어느 것도 말하는 권위를 찾지 못했습니다 . 태그 구현을 어떻게 처리 하는가?

— Maximillian Laumeister

2

@Max는 따르면 이 요소는 CSS 서식 모델의 범주 밖에있는 대체. HTML 또는 CSS 사양의 어떤 것도 이미지가 인라인임을 지정하지 않습니다. 따라서 브라우저가 말한 내용에 관계없이 이미지는 설정된대로 정확하게 처리됩니다 display:inline-block.

— DisgruntledGoat

53

img요소는 인 대신 인라인 소자 .

인라인 요소처럼 동작하지만 인라인 요소에 대한 일부 일반화는 요소에 적용되지 않습니다 img.

예 :

일반화 : "폭은 인라인 요소에는 적용되지 않습니다"

어떤 사양은 실제로 말한다 : "적용 대상 : 모든 요소가 있지만 대체되지 않은 인라인 요소, 테이블 행과 행 그룹"

이미지는 대체 된 인라인 요소이므로 적용됩니다.

— 쿠엔틴
소스

13

IMG 요소는 인라인이므로 플로팅되지 않으면 텍스트 및 기타 인라인 요소와 수평으로 흐릅니다.

그것들은 너비와 높이가 있다는 점에서 "블록"요소입니다. 그러나 이러한 점에서 "인라인 블록"처럼 동작합니다.

— 로 부스 토
소스

7

거의 모든 목적을 위해 너비가 설정된 인라인 요소로 생각하십시오. 기본적으로 CSS를 사용하여 이미지를 표시하는 방법을 자유롭게 지정할 수 있습니다. 나는 일반적으로 몇 가지 이미지 클래스를 다음과 같이 설정했다.

img.center {display:block;margin:0 auto;}

img.left {float:left;margin-right:10px;}

img.right  {float:right;margin-left:10px;}

img.border  {border:1px solid #333;}

— 몬태나 플린
소스

2

이미지를 삽입 할 때마다 이미지의 원래 너비 만 사용됩니다. 그 옆에 다른 html 요소를 추가하면 허용 될 것입니다. 이미지를 "인라인"요소로 만듭니다.

— 화신
소스

0

사실, 그것들은 둘 다 또는 더 정확하게는 "인라인 블록"요소들입니다. 즉, 텍스트처럼 인라인으로 흐르지 만 블록 요소와 같이 너비와 높이가 있습니다.

— Modaser Sadat
소스