Solution to the gap problem at the bottom of the css image

I. Opening

A long time ago, I counted seven sins of IE6 (seven bugs with egg pain).Check IE6 bugs to see which ones you have encountered [updating]Although the number of IE6 users is declining, we still need to consider for those who are confused. Who makes the user the boss. Now, let's list the eighth sin of IE6 today: there is a gap at the bottom of the picture. To learn about the solution, please take a look.

II. Symptom

When I revised the homepage of the website yesterday, I was going to display the blog recommendation column with the master's profile picture and add a 1px border around the picture. The css tutorial code is as follows:

  
  
   

    

     
The code is as follows:
     
Copy code
 
    
 
    

     
# Blog_list span. blog_img {display: inline-block; padding: 1px; border: # ddd solid 1px; margin-bottom: 2px}
# Blog_list img {width: 78px; height: 78px ;}
 
    
   
  
I thought this css would be okay, but I tested it with IE6 carefully. I was so sad that there was a gap below the picture in IE6, I didn't add margin and padding to the image. Where is the gap? Really tangled.

                              

Normally, there is a gap at the bottom of IE6.

III. Solutions

There is no way to find a solution. It is actually quite simple. You can refer to the following solutions:

1. Set img display to block

2. Set the font-size of the parent element of img to 0.

3. Set the vertical-align attribute value of img to vertical-align: top | bottom | middle | text-bottom.

IV. Summary

1. IE6 should die early!

2. People who are still using IE6 can quickly turn to evil ideas. Do not be confused. web designer cannot afford to hurt!

3. We need to be calm, calm, analyze, and complain when we encounter problems!