Detailed explanation of how to clear a few pixels of blank space under an image using CSS

Recently, a friend asked me a question:

When layout the page, I found that there is a 1-2 pixel blank space under the picture. How can I remove it?

This is a browser design issue. img is originally an inline element, but it can use width and height. When the parent element does not set the height, problems such as 3px gap will appear when the height calculated by the height of the child elements is given to the parent element.

Method 1 to remove the gap under the image

img{display:block;}

Method 2

img{vertical-align:top;}

In addition to the top value, you can also set it to text-top | middle | bottom | text-bottom, or even specific <length> and <percentage> values.

Method 3

#qdxw{font-size:0;line-height:0;}

#qdxw is the parent element of img

Summarize

This concludes this article on how to use CSS to clear a few pixels of blank space under images. For more information on how to use CSS to clear a few pixels of blank space under images, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. We hope that you will support 123WORDPRESS.COM in the future!