CSS invisible voids (inline pits)

Long time no writing, and recently a little busy, plus their own in a video-to-gif thing (GitHub: Portal), is a Node-webkit (Mac version with Atom-shell) do a desktop application, also do not write anything, But when it comes to this thing, there's a problem with the gap, so check the information, discuss, research ...

First look at the debug code

<! Doctype html>
Just plain use div to install an IMG, and then let div more than img 1px (somewhat similar to the border), but the problem is:
It is clear that the yellow part is the div padding, but the following padding is relatively large.
There are 3 ways to solve the problem (that is, my CSS commented out 3 lines):
To the Father element plus--
1:font-size:0;
or add to the IMG element--
2:vertical-align:bottom;
3: Display:block;
But why? If the General monkey, will certainly use, can solve the problem on the line, but we are not the general monkey, we are the program APE!!!
Want to go, since font-size:0, can solve, should be related to font.
To explain why, I cut 2 more diagrams to aid understanding:
The first picture, I use the console to the equivalent ruler, moved to div padding as large, found that only p below is blocked, and the other seems to be the same distance from the console of the gap is the same size, so I cut the second picture,
Vertical-align is used to set the baseline, when the font-size is 0, there is no baseline gap, so the baseline should be the Ghost ~
After a turn over the wall found that the original vertical-align default baseline is base line, (so p will be partially blocked).
Write here, suddenly think of the previous 2 inline elements between the gap, but also to the Father element plus font-size to solve, and this time to IMG Plus block can also solve the problem, in the final analysis or the pan element of the pot ~. all inline elements have the same font size and row height attributes as the text, so IMG is also affected by the baseline, which is the problem  
CSS invisible voids (inline pits)