The gap between the img and the parent element is solved, and the gap between the img element is solved.

The gap between the img and the parent element is solved, and the gap between the img element is solved.

Recently, when I was working on the H5 page, I suddenly found a problem. I used a div to wrap an img. During mobile phone preview, I found a gap between the image and the div.

At that time, the first response was to see if the spacing was not set to 0, so I previewed the Code:

. Active img {

Width: 100%;

Margin: 0;

}

Later, I browsed some technical documents and found the problem. It turned out that the behavior of inline elements inside the block element was caused by the H5 Document declaration, simply put, a block element has an invisible blank node with no width.
If the vertical-align attribute is not set, vertical-align defaults to baseline.
There are two solutions:
1. The first most direct solution is:

Set img label: vertical-align: bottom

Modified code:

. Active img {
Width: 100%;
Margin: 0;
Vertical-align: bottom; // both top and bottom can be used.
}

2. Because baseline is used to set the vertical alignment of line elements (inline) or table Single Elements (table-cell), img can be converted into block-level elements.
Method 2: display: block. Set the font-size of the parent element to 0.
Modified code:

.active img{
　　width:100%;
　　margin:0;
　　display:block;
}

.active{
font-size;0;
...
}

Conclusion: The first time I wrote a document to record my work experience, I may not write well. Please give me more guidance.