Six solutions to the problem of white space at the bottom of img

This article brings you six major solutions to the problem of white space at the bottom of img. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Sometimes, we do not set the margin-bottom value in the margin attribute for the image (img tag), and a blank bottom will appear in some browsers. Below, we introduce several methods to solve this problem.

1. Set the image as a block-level element

For example: img{display:block;}

2. Set the image Vertical alignment

For example: img{vertical-align:top;}(The value of vartical-align is optional, text-top, bottom, text-bottom, etc., depending on the situation.)

3. Set the text size of the parent object to 0px

For example: the parent object of img is imgClass, then you only need to add an attribute font-size:0px to imgClass. But this will prevent the text in the parent object from displaying properly. Even if the text part is enclosed by a sub-object, it can still be displayed by setting the sub-object text size, but an error message that the text is too small will be prompted during CSS validation.

4. Change the properties of the parent object

If the height and width of the parent object are fixed and the image size depends on the parent object, you can set the parent object: overflow:hidden ;

5. Set the floating attribute of the image

such as: img{float:left;}

6. Cancel the image tag and The space between the last closing tag of its parent object

is a bit difficult to implement. We often add some blank indentation in order to make the page code hierarchy clear.

In general, if you don’t need to mix pictures, it is better to use method 1), and method 2) is also good; if you want to mix pictures and texts, method 5) will be better, but Remember to clear floats. Of course, which method to use depends on the specific situation and individual preferences.

The above is a complete introduction to the six major solutions to the problem of white space at the bottom of img. If you want to know more about HTML tutorial, please pay attention to the PHP Chinese website .

The above is the detailed content of Six solutions to the problem of white space at the bottom of img. For more information, please follow other related articles on the PHP Chinese website!