Use CSS to eliminate gaps between pictures

When you use CSS to compose multiple images, there are sometimes a few pixel gaps in the bottom of the picture-as shown:

Workaround:
Just define the following rules for the picture in CSS:

IMG  {    outline-width:0px;    Vertical-align:top;  }  

The results after use are as follows:

CSS orchestration picture Creating a gap problem when you use CSS to orchestrate multiple images, there are sometimes a few pixel gaps in the bottom of the picture-as shown:




Workaround:
Just define the following rules for the picture in CSS:
img{Vertical-align:bottom;}
The results after use are as follows:

There is a gap resolution between the images that are spliced with the Li Tag (CSS)

Recently in helping users to design the site, encountered a problem: cut a large image into slices with the LI tag stitching together, under the IE8 display Normal, in the IE8 compatibility View or IE6 under the display of a gap between the picture. The code is as follows:

<ul>
             <li class= "A1" > </LI>
                 <li class= "A2" ></li>
                <li class= "A3" > </li>
                 <li class= "A4" ></LI>
                <li class= "A5" > </LI>
    
                 
   </ul>

After some research and study, the problem has finally been solved. To create a style for a picture slice, the code looks like this:

<style>
. jin{
Vertical-align:bottom;
Display:block;
}
</style>

You can then apply this style to each slice as normal. The code and effects are as follows:

<ul>
<li class= "A1" ></li>
<li class= "A2" ></li>
<li class= "A3" ></li>
<li class= "A4" ></li>
<li class= "A5" ></li>


</ul>

Use CSS to eliminate gaps between pictures