Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.