> 웹 프론트엔드 > CSS 튜토리얼 > 내 코드에서 지정하지 않았는데도 내 이미지 아래에 보이지 않는 여백이 있는 이유는 무엇입니까?

내 코드에서 지정하지 않았는데도 내 이미지 아래에 보이지 않는 여백이 있는 이유는 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-10-25 02:38:30
원래의
526명이 탐색했습니다.

Why is There an Invisible Margin Below My Images, Even Though My Code Doesn't Specify It?

사진 아래에 보이지 않는 이상한 여백

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

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

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

세로 정렬, 글꼴 크기 및 줄 높이와 같은 속성을 조정하면 간격에 영향을 줄 수 있지만 신뢰성이 떨어지며 여전히 영향을 받기 쉽습니다. 다양한 상황에서 효과를 발휘합니다.

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

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

위 내용은 내 코드에서 지정하지 않았는데도 내 이미지 아래에 보이지 않는 여백이 있는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿