How to fix gaps between pictures

In the h project, there are about 3px gaps between several img tags. The effect is very bad, so how to solve it? The editor below will share with you the perfect solution to the gaps between images in HTML5. Friends who need it can refer to it. I hope it can help everyone.

Recently working on an h5 project, I encountered a problem that I couldn’t figure out. There was a gap of about 3px between several img tags.

As shown in the picture:

Later, Baidu did some research and roughly understood the reason. It was because the browser regarded the element as a word, and the gap was still long after some aligned letters. A section (such as j, g) is reserved. I have also found several solutions, which are feasible for personal testing.

1. Set the font-size of the body to 0;

When doing this, remember to specify the font size for the element when writing p below.

2, write

  <img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="How to fix gaps between pictures" >
    <img  src="assets/img/turntable/lucky-turntable_11.png"  alt="How to fix gaps between pictures" >
    <img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="How to fix gaps between pictures" >

as

<img  src="assets/img/turntable/lucky-turntable_07.jpg" alt="How to fix gaps between pictures" ><img  src="assets/img/turntable/lucky-turntable_11.png" alt="How to fix gaps between pictures" ><img  src="assets/img/turntable/lucky-turntable_08.jpg" alt="How to fix gaps between pictures" >

that is Say, write the img tags on the same line, without spaces in the middle;

Have you learned this? Hurry up and give it a try.

Related recommendations:

How to use CSS to automatically scale the height of an image

How to insert an image into html

Detailed explanation of the use of css outer margin

The above is the detailed content of How to fix gaps between pictures. For more information, please follow other related articles on the PHP Chinese website!