How to cancel image interval in css

How to cancel the image interval in css: first create an HTML sample file; then insert two images through the img tag; then write "font-size:0;" on the parent of the img tag; and finally set Just use the attribute "display:block".

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

How to cancel the gap between img images

1. Write multiple img tags In one line

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

Effect:

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

Effect:

##2. In the img tag Write on the parent: font-size:0;//This is also helpful in solving the problem of display: inline-block

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

Effect:

3. Use display: block (img is an inline element) // It needs to float

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

Effect:

##4. Use letter-spacing Attribute

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

Effect:

The above is the detailed content of How to cancel image interval in css. For more information, please follow other related articles on the PHP Chinese website!