The CSS :block element contains the cause and resolution of the gap at the bottom of the IMG

The reason is according to the authoritative Guide to CSS (Chinese version 3).

Because of the vertical-align rule, this alignment rule causes some Web browsers to always place the bottom edge of a replacement element at the baseline, even if there is no other text in the line. For example, a form cell has only one image. The image may actually be at the baseline, although in some browsers the space below the baseline causes a blank space to appear below the image. Other browsers “wrap” the image in a form cell so there is no white space. According to the CSS working group, this blank behavior is correct, but most writers don’t like it.

The solution

1. To the pictureThe label is set to display:block.

   img{
       display: block;
   }
   Copy the code

2. Define the font size in the container as 0.

   div{
       font-size: 0;
   }
   Copy the code

3. Img tag vertical-align:top,vertical-align:bottom,vertical-align:middle.

   img{
       vertical-align: top || bottom || middle;
   }
   Copy the code

There are other ways, but personally I think these three ways are enough.