Solution to blank space between IMG Elements

To make a rolling slide, you need to link the images one by one and then present them one by one. However, after the arrangement is completed, there is a blank space in the middle of each two images (padding and margin are already 0 ), and the width is unknown, so it is difficult to judge when writing an animation using Js. Therefore, Google will get the following solution, and the remarks based on my actual situation are as follows:

1. convert an image into a block-Level Image

That is, set IMG:
Display: block;
In this example, add a set of CSS code:
# Sub IMG {display: block ;}

Note: Since each image is spliced together, this method cannot be used.

2. Set the vertical alignment of the image

That is, you can set the vertical-align attribute of the image to "Top, text-top, bottom, text-bottom. In this example, add a set of CSS code:
# Sub IMG {vertical-align: Top ;}

Note: Invalid in my code

3. Set the text size of the parent object to 0 PX.

That is, adding a row in # Sub: font-size: 0; can solve the problem. But this also raises a new problem, and the text in the parent object cannot be displayed. Even if the text section is enclosed by a quilt image, the text size of the Child image can still be displayed. However, when CSS verification is performed, a small text error is prompted.

Note: I chose this method.

4. Change the attributes of the parent object

If the width and height of the parent object are fixed and the image size varies with the parent object, you can set overflow: hidden. In this example, you can add the following code to # Sub: width: 88px; Height: 31px; overflow: hidden;

Note: In my example, the parent container must be over: visible and not tested.

5. Set floating attributes of images

In this example, add a line of CSS code: # sub IMG {float: Left;}. This method is a good choice if you want to achieve text-and-image mixing.

Note: This is certainly acceptable, but if you didn't have float: left before, you should re-write some CSS

6. Cancel the space between the Image Tag and the last ending tag of its parent object.

This method should be emphasized that this method may be messy during actual development, because when writing code, in order to make the code more semantic and hierarchical, it is inevitable to provide code indent display through IDE, which will inevitably display labels and other labels in line, for example, the "Apply source format" command of DW. Therefore, this method can be used for us to understand a case where a bug occurs. For specific solutions, please refer to the steps for splitting.

Note: the most stupid way, and can only solve the white space caused by IDE, not the blank space forcibly explained by the browser

 

I chose to set the font-size of the parent element to 0, which may cause the text of the parent element to disappear directly. In addition, one or two pixels of white space still appear, finally, I found that 6th items solved my problem...