Three ways to remove the default blank space at the bottom of the img tag image

1. Sample code

<div class="content" style="background-color:pink;">
        <img src="./imgs/avatar.jpg" style="width: 300px;height: 300px;">
</div>

2. Operation results

3. Reasons for blank space

1. The display attribute of the image is inline by default.

2. The default value of the image vertical-align attribute is baseline

4. Solution

Method 1: Turn img into a block-level element

img { display:block; }

Method 2: Set the vertical-align attribute value in img to middle

img { vertical-align:middle; }

Method 3: Set the row height of the img's parent element to 0 (the parent element of the above code is a div with class="content")

.content { line-height:0; }