How to solve the gaps in pictures in H5

This time I will bring you how to solve the gaps in the pictures in H5. What are the precautions to solve the gaps in the H5 pictures? The following is a practical case, let’s take a look. one time.

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

Later, Baidu checked it Now, I roughly understand the reason. It is because the browser treats the elements as words, and the gaps are reserved for some letters that still grow a bit after aligning them (such as j, g). 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 the div below.

2, write

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="How to solve the gaps in pictures in H5" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"    alt="How to solve the gaps in pictures in H5" >
  <img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="How to solve the gaps in pictures in H5" >

as

<img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_07.jpg"  class="lazy"   alt="How to solve the gaps in pictures in H5" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_11.png"  class="lazy"   alt="How to solve the gaps in pictures in H5" ><img  src="/static/imghwm/default1.png"  data-src="assets/img/turntable/lucky-turntable_08.jpg"  class="lazy"   alt="How to solve the gaps in pictures in H5" >

that is to say, write the img tag on the same line, without spaces in the middle;

I believe I read it You have mastered the methods in these cases. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Related reading:

How to use video and audio tags and progress bars in H5

New interaction between H5 and C3 What are the features

H5 block-level tag summary

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