나는 그 <img>요소가 둘 다처럼 행동 하는 곳을 읽었습니다 . 맞다면 누군가가 예를 들어 설명해 주시겠습니까?
답변
사실, 그것들은 둘 다 또는 더 정확하게는 “인라인 블록”요소들입니다. 즉, 텍스트처럼 인라인으로 흐르지 만 블록 요소와 같이 너비와 높이가 있습니다.
CSS에서 display: inline-block이미지의 동작을 복제하도록 요소를 설정할 수 있습니다 *.
이미지와 객체는 내용이 없기 때문에 “대체 된”요소라고도합니다. 요소는 본질적으로 이진 데이터로 대체됩니다.
* 브라우저는 기술적으로 display: inline(개발자 도구에서 볼 수 있듯이) 사용하지만 이미지에 특별한 처리를하고 있습니다. 그들은 여전히의 모든 특성을 따릅니다 inline-block.
답변
img요소는 인 대신 인라인 소자 .
인라인 요소처럼 동작하지만 인라인 요소에 대한 일부 일반화는 요소에 적용되지 않습니다 img.
예 :
일반화 : “폭은 인라인 요소에는 적용되지 않습니다”
어떤 사양은 실제로 말한다 : “적용 대상 : 모든 요소가 있지만 대체되지 않은 인라인 요소, 테이블 행과 행 그룹”
이미지는 대체 된 인라인 요소이므로 적용됩니다.
답변
IMG 요소는 인라인이므로 플로팅되지 않으면 텍스트 및 기타 인라인 요소와 수평으로 흐릅니다.
그것들은 너비와 높이가 있다는 점에서 “블록”요소입니다. 그러나 이러한 점에서 “인라인 블록”처럼 동작합니다.
답변
거의 모든 목적을 위해 너비가 설정된 인라인 요소로 생각하십시오. 기본적으로 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;}답변
이미지를 삽입 할 때마다 이미지의 원래 너비 만 사용됩니다. 그 옆에 다른 html 요소를 추가하면 허용 될 것입니다. 이미지를 “인라인”요소로 만듭니다.
답변
사실, 그것들은 둘 다 또는 더 정확하게는 “인라인 블록”요소들입니다. 즉, 텍스트처럼 인라인으로 흐르지 만 블록 요소와 같이 너비와 높이가 있습니다.