img 하단 공백 문제에 대한 6가지 해결책

이 글은 img 하단의 공백 문제에 대한 6가지 주요 해결책을 제시합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

가끔 이미지(img 태그)의 margin 속성에 margin-bottom 값을 설정하지 않아 일부 브라우저에서 빈 하단이 나타나는 경우가 있습니다. 아래에서는 이 문제를 해결하기 위한 몇 가지 방법을 소개합니다.

1. 이미지를 img{display:block;}

과 같은 블록 수준 요소로 설정합니다.

2. img{vertical-align :top;}( vartical-align 값은 상황에 따라 text-top, Bottom, text-bottom 등 선택 사항입니다.)

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

로 설정합니다. : img의 상위 객체가 imgClass인 경우에만 imgClass에 글꼴 크기:0px 속성을 추가하면 됩니다. 그러나 이렇게 하면 상위 개체의 텍스트가 제대로 표시되지 않습니다. 텍스트 부분이 하위 개체로 둘러싸여 있어도 하위 개체의 텍스트 크기를 설정하면 표시할 수 있지만 CSS를 확인할 때 텍스트가 너무 작다는 오류 메시지가 표시됩니다.

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

상위 개체의 높이와 너비가 고정되어 있고 이미지 크기가 상위 개체에 따라 달라지는 경우 상위 개체를 설정할 수 있습니다: Overflow:hidden;

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

예: img{float:left;}

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

이것은 약간입니다. 구현하기 어렵습니다. 페이지 코드 계층 구조를 명확하게 하기 위해 공백 들여쓰기를 추가하는 경우가 많습니다.

일반적으로 이미지를 혼합할 필요가 없다면 방법 1)이 더 좋고, 이미지와 텍스트를 혼합하려면 방법 2)도 좋지만 플로트를 지우는 것을 잊지 마세요. . 물론 어떤 방법을 사용할지는 구체적인 상황과 개인의 선호도에 따라 다릅니다.

위 내용은 img 하단의 공백 문제에 대한 6가지 주요 솔루션에 대한 전체 소개입니다.

HTML 튜토리얼

에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 img 하단 공백 문제에 대한 6가지 해결책의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!