CSS 이미지의 공백을 해결하는 6가지 방법

페이지에서 p+CSS 조판을 수행할 때 IE6의 이미지 요소 img 아래에 공백이 너무 많이 발생하는 문제가 발생하는 경우가 많습니다(물론 Firefox에서도 가끔 발생함). 이 문제에 대한 해결책은 "재생"하는 것입니다. by Ear"”, 이유에 따라 다양한 솔루션을 사용해야 합니다. 여기에서는 이미지 레이아웃 아래의 과도한 간격에 대한 BUG를 해결하는 일반적인 방법을 직접 요약합니다. 이 기사에서는 주로 CSS 이미지 아래의 간격에 대한 6가지 솔루션을 소개합니다. 필요한 친구들이 참고할 수 있고 모두에게 도움이 되기를 바랍니다.

1. 이미지를 블록 수준 객체로 변환합니다.

즉, img를 다음과 같이 설정합니다.

display: block;

이 예에서는 CSS 코드 세트를 추가합니다: #sub img {display:block;}

IE6/ 7 Invalid

2. 이미지의 수직 정렬을 설정하세요

즉, 이미지의 수직 정렬 속성을 "top, text-top, lower, text-bottom"으로 설정하는 것도 해결 가능합니다. 예를 들어, 이 예에서는 CSS 코드 세트를 추가합니다: #sub img {vertical-align:top;}

3. 상위 개체의 텍스트 크기를 0px

으로 설정합니다. 즉, #sub에 줄을 추가합니다. : 글꼴 크기:0;

문제를 해결할 수 있습니다. 그러나 이로 인해 새로운 문제가 발생했습니다. 상위 개체의 텍스트를 표시할 수 없습니다. 텍스트 부분이 하위 개체로 둘러싸여 있어도 하위 개체의 텍스트 크기를 설정하면 표시할 수 있지만 CSS를 확인할 때 텍스트가 너무 작다는 오류 메시지가 표시됩니다.

4. 상위 개체의 속성을 변경하세요

상위 개체의 너비와 높이가 고정되어 있고 이미지 크기가 상위 개체에 따라 달라지는 경우 다음을 설정하여 문제를 해결할 수 있습니다.

이 예에서는 #sub에 다음 코드를 추가할 수 있습니다: width:88px;height:31px;overflow:hidden;

5. 이미지의 부동 속성을 설정합니다

이 예에서는 CSS 한 줄을 추가합니다. code: #sub img {float:left;}

이미지와 텍스트를 혼합하여 배열하고 싶다면 이 방법이 좋은 선택입니다.

6. 이미지 태그와 상위 개체의 마지막 닫는 태그 사이의 공백을 제거합니다.

이 방법은 코드 작성 시 코드를 보다 의미있고 명확하게 만들기 위해 IDE를 통해 코드 들여쓰기 표시를 제공하는 것이 불가피하기 때문에 실제 개발에서는 문제가 발생할 수 있으며 이로 인해 필연적으로 레이블이 생성됩니다. DW의 "소스 형식 적용" 명령과 같은 기타 태그는 새 줄에 표시됩니다. 따라서 이 방법은 BUG가 발생하는 상황을 이해하는 데 도움이 될 수 있습니다. 특정 솔루션은 모든 사람이 해결해야 합니다.

관련 권장사항:

위쪽과 아래쪽 img 태그 사이의 간격을 해결하는 방법

div+css ie6 ie6 그림 사이에 간격이 있음_html/css_WEB-ITnose

CSS 연구 노트 - 그림 img 및 요소 div 사이의 상위 간격solution_html/css_WEB-ITnose

위 내용은 CSS 이미지의 공백을 해결하는 6가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!