CSS 이미지 아래의 공백을 처리하는 방법

이번에는 CSS 이미지에서 공백을 처리하는 방법과 CSS 이미지에서 공백을 처리할 때 Notes가 무엇인지 알려드리겠습니다. 아래는 실제 사례입니다.

페이지에서 p+CSS 조판을 수행할 때 IE6의 이미지 요소 img 아래에 공백이 너무 많아지는 문제가 발생하는 경우가 많습니다(물론 Firefox에서도 가끔 발생함). 이 문제에 대한 해결책은 "다음을 참조하세요. 기회" "행동", 다양한 이유에 따라 다양한 솔루션을 사용해야 합니다. 여기서는 참조용으로 이미지 레이아웃 아래의 추가 간격에 대한 BUG를 해결하는 일반적인 방법을 요약합니다.

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

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

display: block;

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

IE6/7无效

2、设置图片的垂直对齐方式

即设置图片的vertical-align属性为「top，text-top，bottom，text-bottom」也可以解决。如本例中增加一组CSS代码： #sub img {vertical-align:top;}

3、设置父对象的文字大小为0px

即，在#sub中添加一行： font-size:0;

可以解决问题。但这也引发了新的问题，在父对像中的文字都无法显示。就算文字部分被子对像括起来，设置子对像文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

4、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对像而定，那麽可以设置： overflow:hidden; 来解决。

如本例中可以向#sub中添加以下代码： width:88px;height:31px;overflow:hidden;

5、设置图片的浮动属性

即在本例中增加一行CSS代码： #sub img {float:left;}

IE6/7이 유효하지 않습니다

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

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

로 설정합니다. , #sub에 다음 줄을 추가하세요. font-size:0;

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

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

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

:hidden; 문제를 해결합니다.

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

5 이미지를 설정합니다. : //www.php.cn/code/6046.html" target="_blank">부동 속성

🎜은 이 예에서 CSS 코드 한 줄을 추가하는 것을 의미합니다. #sub img {float:left; } 🎜🎜이미지와 텍스트를 혼합하여 배열하고 싶다면 이 방법을 선택하는 것이 좋습니다. 🎜🎜🎜🎜6. 🎜image 태그🎜와 상위 개체의 마지막 닫는 태그 사이의 공백을 취소합니다. 🎜🎜🎜🎜이 방법은 코드 작성 시 코드를 보다 의미있고 명확하게 만들기 위해 IDE를 통해 코드 들여쓰기 표시를 제공하는 것이 불가피하기 때문에 실제 개발에서 문제가 발생할 수 있다는 점을 강조해야 하며, 이로 인해 필연적으로 라벨이 생성됩니다. DW의 "소스 형식 적용" 명령과 같은 기타 레이블은 새 줄에 표시됩니다. 따라서 이 방법은 BUG가 발생하는 상황을 이해하는 데 도움이 될 수 있습니다. 특정 솔루션은 모든 사람이 해결해야 합니다. 🎜🎜🎜🎜🎜🎜이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜CSS를 완전히 사용하여 요소를 중앙에 배치하세요🎜🎜🎜🎜🎜의사 요소 사용에 대한 자세한 설명::before 및 ::after🎜🎜🎜🎜🎜font-size-adjust 속성이 웹을 최적화하는 방법 페이지 레이아웃🎜🎜🎜

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