How to solve the problem of blank img picture elements in HTML+CSS layout
This article mainly introduces how to solve the problem of blank HTML+CSS layout img picture elements, the article is very detailed, has a certain reference value, interested friends must read it!
1. Convert pictures to block-level objects
That is, set the img to:
Display:block
Add a set of CSS code in this example:
# nav img {vertical-align:top;} 2. Set the vertical alignment of the picture
It can also be solved by setting the vertical-align property of the picture to "top,text-top,bottom,text-bottom". For example, add a set of CSS code in this example:
# nav img {vertical-align:top;} 3. Set the text size of the parent object to 0px
That is, add a line to # nav:
Font-size:0
It can solve the problem. But this also gives rise to a new problem, where the text in the parent object cannot be displayed. Even if the text part is enclosed by a sub-object, setting the sub-object text size can still be displayed, but it will prompt an error that the text is too small during the CSS effect.
4. Change the properties of the parent object
If the width and height of the parent object are fixed, and the size of the picture depends on the parent object, you can set:
Overflow:hidden
To solve it. As in this example, you can add the following code to # sub:
Width:88px;height:31px;overflow:hidden;5, set the floating property of the picture
That is, add a line of CSS code to this example:
# nav img {float:left;}
If you want to achieve mixed layout of picture and text, this method is a good choice.
6. Cancel the space between the picture tag and the last closing tag of its parent object.
For example:
The web page design is revised to:
Web page design above is all the contents of this article entitled "how to solve the problem of blank img picture elements in HTML+CSS layout". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
