집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 이미지 아래의 공백 문제를 해결하는 방법

CSS 이미지 아래의 공백 문제를 해결하는 방법

不言원래의: 2018-06-11 15:36:134108검색

이 글에서는 CSS 이미지 아래의 공백 문제에 대한 6가지 해결 방법을 주로 소개합니다. 도움이 필요한 친구는 참고하면 됩니다.

페이지에서 p+CSS 조판을 하다가 IE6(물론 Firefox에서도 가끔) 브라우저가 발생하는 문제 이미지 요소 img 아래의 과도한 공백은 확실히 일반적입니다. 이 문제에 대한 해결책은 "귀로 듣는 것"이기도 합니다. 여기서 해결책은 이미지 아래의 중복 공간을 직접 해결하는 것입니다. 레이아웃 간격 버그를 수정하기 위해 일반적으로 사용되는 방법에 대한 요약이 참조용으로 제공됩니다.

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

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

display: block;

이 예에서는 CSS 코드 세트를 추가합니다. IE6/7

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

#sub img {display:block;}

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

로 설정합니다. 즉, #sub:

#sub img {vertical-align:top;}

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

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

이 예에서는 #sub에 다음 코드를 추가할 수 있습니다.

 font-size:0;

5. 이미지의 부동 속성을 설정합니다즉, 이 예에서는 CSS 코드 한 줄을 추가합니다.

width:88px;height:31px;overflow:hidden;

그래픽과 텍스트의 혼합 배치를 구현하고 싶다면 이 방법을 선택하는 것이 좋습니다.

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

CSS 이미지 아래의 공백 문제를 해결하는 방법

관련 기사