그림 아래 이상한 보이지 않는 여백

이번 호에서 저자는 웹 페이지의 이미지 아래에 보이지 않는 여백이 있음에도 불구하고 코드의 마진. 이는 인라인 요소로서의 이미지 특성으로 인해 발생하는 일반적인 문제입니다.

응답에 따르면 이미지의 기본 인라인 동작은 텍스트 기준선에 맞춰 정렬되는 이미지 하단과 텍스트 하단 사이에 공간을 만듭니다. 텍스트 라인. 이 문제를 해결하려면 이미지를 블록 요소로 변환하는 것이 해결책입니다.

간단한 해결책 중 하나는 display: block; 이것을 달성하기 위해. 또 다른 방법은 float: left;를 사용하여 이미지를 부동시키는 것입니다. 또는 float: right;, 이는 또한 블록 요소로 변환됩니다.

vertical-align, 글꼴 크기 및 line-height와 같은 속성을 조정하면 간격에 영향을 줄 수 있지만 신뢰성이 떨어지고 여전히 영향을 받기 쉽습니다. 다른 상황에서 효과가 나타납니다.

추가 정보를 위해 제공되는 관련 질문은 다음과 같습니다.

• XHTML 1.0 엄격에서 이미지 아래에 원하지 않는 간격이 있습니다.
• 내 이미지에 추가 항목이 있는 이유 간격?
• IE 이미지 간격 문제