When writing code, I encountered such a problem. The following is html and css
#header {
position: relative;
left: 0;
width : 100%;
top: 0;
}
#header img {
/*display: block;*/
width: 100%;
}
After running the results, we found that the height of the header is always 3px more than the img image. This problem will occur whether on the mobile or PC side.
1. At first I thought it was an html problem, but I changed the html to
Still doesn’t work, so this may not be an html problem.
2. Searching for information on the Internet, I found that the img can be set to block, which solved the problem.
3. I learned the reason through google. img is a text-like element. At the end, a blank character will be added at the end, so there will be 3px more
English explanation