내 이미지 아래에 추가 공백이 있는 이유는 무엇입니까?

이미지 태그 아래의 신비한 공백 문제 해결

태그를 사용하면 이미지 아래에 당황스러운 공백이 나타날 수 있습니다. 코드를 철저하게 검사했음에도 불구하고 이 공간의 소스는 여전히 파악하기 어렵습니다.

기준선 정렬 이해

답은 HTML의 기준선 정렬 개념에 있습니다. 를 포함한 인라인 요소 태그는 기준선 아래로 확장되는 문자(디센더라고 함)를 수용하는 기준선에 정렬됩니다. 이렇게 하면 텍스트 요소가 일관된 수직 위치를 유지할 수 있습니다.

공백 해결

기준선 정렬로 인해 발생한 공백을 해결하려면 다음 해결 방법을 고려하세요.

• 수직 정렬 적용: 수직 정렬 추가: 하단 태그를 사용하여 컨테이너 하단에 정렬하여 간격을 없애세요.
• 표시 속성 변경: 인라인에서 블록 수준(디스플레이: 블록)으로 태그를 지정하여 기준선 정렬을 제거합니다.
• 컨테이너 줄 높이 조정: 컨테이너의 줄 높이를 늘려 콘텐츠를 아래로 밀어서 디센더를 수용할 수 있는 충분한 공간.
• 컨테이너 글꼴 크기를 0으로 설정: 글꼴 크기: 0을 디센더에 의해 생성된 공간을 제거하는 컨테이너입니다. 선택적으로 하위 요소의 글꼴 크기를 재설정합니다.

추가 참고 사항

• 이 문제는 여백이나 패딩에서 발생하는 것이 아니므로 어렵습니다. 개발자 도구 사용 여부를 확인합니다.
• 이 격차는 기준선으로 인한 콘텐츠 상승으로 인해 발생합니다. 정렬.
• 다른 인라인 요소(예: 텍스트, 범위)에서도 이 동작이 나타날 수 있습니다.

위 내용은 내 이미지 아래에 추가 공백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!