How to remove the background gap (3 pixels for an image)

I. Ask questions

In the browser, there is a gap in the picture, which is also called a 3-pixel bug. For example:

This is the magnified effect. We can clearly see that the image is obviously not aligned with the bottom of the text, such as the letter G, it is more down than the bottom of the image.

Here we need to clarify:

1. This is not a browser bug, but a baseline problem occurs when you write English letters. Baselines determine how images are written. This is the essence of the Gap Between pictures in the browser.

So what is a baseline?

When we were a child, we learned English. At first we used four lines to write English letters, which is the same as the Five-line spectrum. The first line is the baseline, which is the foot alignment line of the vast majority of short letters. For example, for a, Z, and X, these short letters use 3rd lines as the alignment at the bottom of the letter. But some letters are relatively "tall", such as G and Y, and their tails will reach 4th online lines.

Similarly, when a character is displayed on a web page, a baseline also exists, and the baseline is aligned based on the four-line English-plain alignment theory. So we will see the situation

　　

Obviously, the red line I added is the baseline position of the line of text on the webpage.

2. The gap is not fixed 3 pixels, but changed.

Once we know the baseline concept, we will know how many pixels the content under the baseline occupies for a letter such as "G, it depends on the font size of the current element.

The default display style of an image on a webpage is inline-block. Therefore, the alignment of the image is the same as that of the text and must be aligned with the baseline, in this way, the gap between the image and the container is generated.

Because the default font size of the browser text is 14px (some are 16 PX by default), it causes the default 3 pixel gap. But we already know that if the current container size is much larger than 16 PX, the gap will be greater than 3 pixels.

Ii. Solution

There are many ways to remove the gap between images. There are three common methods.

(1) set the font size of the parent box to 0, for example:

.box{   font-size: 0;  }

(2) Change the image display.

.box img{   display: block;  }

(3) set vertical alignment for the image

. Box IMG {logical-align: middle; // you can set it to any value}

 

How to remove the background gap (3 pixels for an image)