This article is reproduced from: http://www.javaxxz.com/thread-359306-1-1.html
Problem: After adding an image to a block-level element with an adaptive height, its height will be one more block than the image height
The simple code is as follows:
<!doctype html> <html> <head> <style> .box{width:533px;margin:100px auto;border:1px solid red;} </style> </head> <body> <div class="box"> <img src="http://f.hiphotos.baidu.com/image/h%3D300/sign=12e703ffa5ec8a130b1a51e0c7029157/c75c10385343fbf2f7da8133bc7eca8065388f2f.jpg" width="533px" height="300px" alt="美女"/> </div> </body> </html>
The effect diagram is as follows:
1. We can find that the height of the div is a few pixels more than the height of the picture. Why is this?
This is because the img tag is a block-level tag, which has both the characteristics of block-level tags and line-level tags. This requires us to understand the meaning of each value of the vertical-align attribute in the row-level label. Usually its default value is baseline (baseline), and there is a certain distance between the baseline and the bottom, which is created by the existence of this distance. This blank exists, as long as the image property is display:inline-block, this blank will exist.
2. How do we usually solve it?
(1) Add the display:block attribute to the img tag
(2) Add the vertical-align:top; attribute to the img tag
(3) Add the line-height: 0 or font-size: 0; attribute to the div tag
(4) Given the width and height of the div tag, then add the overflow: hidden; attribute
(5) Add the float:left attribute to the img tag, which is usually used for the mixed arrangement of pictures and text
Summary: Line-level labels are aligned with the baseline of the parent element by default, and there is a distance between the parent's baseline (baseline) and its bottom (bottom), so we usually add vertical to inline labels - Any value of align:top/ align:top/middle/bottom can solve this problem; other solutions depend on the situation;