Gaps between div and img

Gaps between div and img

In this project, the customer said that there should be no gaps between the upper and lower sides of the banner diagram. After a closer look, we found that there were gaps between the upper and lower sides. The review element finds that all div, img padding and margin are both 0, and the gap is true if the cause is not found.

I checked it online and found many similar problems.

There are four solutions:

1. Set img to block;

This basically solves the gap between img and div.

2. Set the vertical alignment of img

V-align: bottom;

3. Set the font-size of the parent div to 0.

4. Set line-height: 0 for the outer div

The first method is recommended.

However, the strange thing about this project is that there are gaps between the upper and lower sides. At the beginning, the gap above can be solved through margin-top:-10px. However, this method won't work after the code structure is changed. I have found a lot online and there is no solution.

Therefore, the following solutions are implemented through positioning:

Set the position of the parent element to relative.

The position of the sub-element img is absolute; the top is set to 0, which perfectly solves this problem.

To avoid affecting other la S, set the div height to the img height.

The cause of the problem is still not found, but the problem is solved. There are many ways to solve the problem, but the depressing thing is that the problem is often solved, but I don't know how it happened, which is not conducive to avoiding these problems in the code writing process in the future.