div 내부의 이미지에는 이미지 아래에 추가 공간이 있습니다.

Question

다음 코드에서 div의 높이가 img의 높이보다 큰 이유는 무엇인가요? 이미지 아래에 공백이 있지만 패딩/마진이 아닌 것 같습니다.

이미지 아래에 있는 공백이나 추가 공간은 무엇인가요?

#wrapper {
  테두리: 1px 단색 빨간색;
  너비:200px;
}
img {
  너비:200px;
}

Answer 1

이 블로그 게시물 에서 제안된 또 다른 옵션은 이미지 스타일을 지정하는 것입니다 style="display: block;"

Answer 2

기본적으로 이미지는 문자와 마찬가지로 인라인으로 렌더링되므로 a, b, c 및 d와 같은 줄에 있습니다.

줄 아래에 문자 g, j, p 및 q를 위한 공백이 있습니다.

할 수 있는 일:

• 조정 vertical-align图像的 将其放置在其他位置（例如中间) 또는
• 변경 显示하여 더 이상 인라인이 아닙니다.

으아악 으아악