CSS에서 이미지 간격을 취소하는 방법

CSS에서 이미지 간격을 취소하는 방법: 먼저 HTML 샘플 파일을 만든 다음 img 태그를 통해 두 개의 이미지를 삽입하고 마지막으로 img 태그의 상위 항목에 "font-size:0;"을 씁니다. 디스플레이: 차단".

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

추천: "css 비디오 튜토리얼"

img 이미지 사이의 간격을 취소하는 방법

1. 한 줄에 여러 개의 img 태그를 작성하세요

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>

효과:

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/><img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>

효과:

2. img 태그의 상위 항목에 다음을 작성합니다:font-size:0;//이는 디스플레이 문제를 해결하는 데도 도움이 됩니다: inline-block

<div   style="max-width:90%">
   <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
   <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
</div>

Effect:

3. block(img 인라인 요소입니다)//플로팅해야 합니다

<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"   style="max-width:90%"/>
<img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"   style="max-width:90%"/>

Effect:

4 문자 간격 속성을 사용하세요

<div style="letter-spacing:-800px"><!--letter-spacing的值无论是负多少都不会产生重叠-->
    <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
    <img src="/static/imghwm/default1.png"  data-src="/i/eg_tulip.jpg"  class="lazy"    alt="郁金香" height="100px"/>
</div>

Effect:

위 내용은 CSS에서 이미지 간격을 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!