Home  >  Article  >  Web Front-end  >  The div only contains one img. As a result, the height of the div is 3px_html/css_WEB-ITnose higher than the height of the img image.

The div only contains one img. As a result, the height of the div is 3px_html/css_WEB-ITnose higher than the height of the img image.

WBOY
WBOYOriginal
2016-06-24 11:39:101071browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn