Small issues common in html (1). html issues

Small issues common in html (1). html issues

Problem: After an image is added to a block-level element with an adaptive height, its height will be one more part than the Image Height.

The simple code is as follows:

 

<! Doctype html> 
 
As follows:

1. We can find that the div height is several pixels higher than the Image Height. Why?
This is because the img label is a row-level label, which has both the features of block-level labels and row-level labels. This requires us to understand the meaning of each vertical-align attribute value in a line-level label. Generally, its default value is baseline, while there is a certain distance between baseline and bottom, because of this distance, this blank space exists. As long as the image attribute is display: inline-block, this blank space will exist.
2. How do we solve this problem?
(1) Add the display: block attribute to the img tag
(2) Add vertical-align: top to the img label; Attribute
(3) add line-height: 0 or font-size: 0 to the div label; Attribute
(4) Specify the div label width and height, and then add the overflow: hidden attribute.
(5) Add the float: left attribute to the img label, which is usually used for mixed arrangement of images and text
Summary: by default, row-level labels are aligned with baseline of parent-level elements, while baseline of parent-level elements is at a distance from bottom, therefore, we usually add vertical-Align: top/Align: any value of top/middle/bottom can solve this problem. Other solutions depend on the situation;