css image Img gap spacing between the plurality of tags

Today write css found pictures add up to exactly three pictures 900px, 900px tolerance is not a put down, because there is an interval between pictures, I guess is the browser space between the two img tags as a blank node .

The Internet to find a few good solutions:

1. img tag write more in a row

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/><img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>

Before the effect of:technology sharing

After effects:technology sharing

 

2. On the parent img tag write: font-size: 0; // in solving this display: inline-block emerging issues also helped

<div style="font-size:0">
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
   <img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px"/>
</div>

effect:technology sharing

 

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

<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>
<img src="/i/eg_tulip.jpg"  alt="郁金香" height="100px" style="display:block"/>

效果:technology sharing

 

4.使用letter-spacing属性

< Div style = "letter-spacing: -800px" > <-! Value letter-spacing, whether negative number will not overlap -> 
    < IMG the src = "/ I / eg_tulip.jpg"   Alt = "tulip " height =" 100px " /> 
    < IMG the src =" / I / eg_tulip.jpg "   Alt =" tulip " height =" 100px " /> 
</ div >        

effect:technology sharing

 

Original: http: //www.cnblogs.com/zqzjs/p/4868325.html

Guess you like

Origin www.cnblogs.com/owenzh/p/11225279.html