About the div layout in the picture of White to the personal view

People who may be exposed to HTML will encounter similar problems, and when a div (or UL or Li) contains a picture, the bottom part of the picture will be white. A lot of people feel very confused. After all, we have not set its margin value or padding value. Why does it have such a white left?

Search on the internet for a while, the domestic netizen explanation is not many, to the picture leave white explanation also ambiguous, roughly only provides some solutions but not to explain the specific reasons. This for the real need to learn this technology is no good for the people, so I am here on the cheek to blow water, after all, I was just a piece of cake.

First of all, to solve this problem, we still have to figure out the root cause of the white picture. I don't know what's going on, even if it's solved, it's just someone else's thing. And my support is to understand long live.

Here, my explanation is: the img tag is an inline replacement element. What is a replacement element. Go check the Authority Guide. What is in-line elements. Go check the Authority Guide.

Because pictures are inline elements. So, no matter how big the picture it is. Even if it is much larger than all the block elements on the page (in fact it will be much smaller than its parent container, unless it is out of the document Stream), the browser will only treat it as an inline element. This way, we might as well treat it as a line of words, how. (as a matter of fact, I understand it as a span). When you think of it as a line of words, maybe the whole situation is different. We know that the text has a thing called an EM box. Maybe you haven't heard it, it doesn't matter. The EM box is explained in the CSS authoritative guide: When no extra margin is set for text (line-height), the EM box indicates the distance between the font and the baseline. In fact, if we don't specify Line-height, the distance between the font and the baseline will depend on the font you choose. Some fonts may cause text to go beyond the EM box. Therefore, most of the cases are that the bottom of the text and the baseline (baseline) are rarely coincident.

Through the above analysis, I tentatively doubt whether the image of white is the distance between the picture and the baseline. Actually, I think it's very good proof. As long as a DIV contains an IMG, and then change the Div line-height, font-size, and so can affect the distance between the text and baseline factors, and then see the picture of the size of the white has changed, it is clear at a glance.

Here to mention the solution, in fact, a lot of online search, but I would like to say that the understanding of the principle of the solution is naturally coming. Here are a few of the methods I recommend:

1. Set display as block, the easiest to understand. Since it has baseline in its inner element, it is not so tangled to turn it into a lump.

2. Set float, since you float up, there is no matter with you.

3. Set the Parent object's Font-size property to 0, this recommendation in the parent container object only picture under the circumstances of use, otherwise other text will not see slightly, of course, you can also take pains to set its child object Font-size value.

In fact, there are many ways, but the above three kinds are recommended by me, because the above three kinds are from the principle to solve the problem. Some of the online users of some methods, such as: Set the parent object of the overflow for hidden, or set the vertical alignment of what, in my opinion, are some "hack" method, the symptoms do not cure, do not recommend use.

Well, that's a lot to say, purely personal. If there are any mistakes, please point out to your friends. Very welcome.

Latest Answer:

Picture of the left white, the root cause is that for inline elements, the browser defaults its Vertical-align property to baseline, which means it shows the baseline of the parent element, but for a complete row segment, the row height is not equal to the content area height, so it is normal for the picture to have a white or a blank. (It is not easy to find this article, for their former ignorant ignorance of the bill)