The img Image Element in XHTML + CSS layout is blank.

Source: Internet
Author: User

In the XHTML + CSS formatting of pages, it is absolutely common to encounter the problem of excessive white space under img in the browser when IE6 (sometimes in Firefox) is used, the solution to this problem is also "on the fly". Different solutions should be used based on different causes, here we will summarize the common methods to solve the BUG of unnecessary space under the image Layout for your reference.

1. convert an image into a block-level object

That is, set img:

Display: block;

In this example, add a set of CSS code:

# Nav img {display: block ;}

2. Set the vertical alignment of the image

That is, you can set the vertical-align attribute of the image to "top, text-top, bottom, text-bottom. In this example, add a set of CSS code:

# Nav img {vertical-align: top ;}

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

That is, add a row in # nav:

Font-size: 0;

Can solve the problem. But this also raises a new problem, and the text in the parent object cannot be displayed. Even if the text is enclosed in some quilt objects, the text size of the sub-object can still be displayed. However, when CSS verification is performed, an error is displayed, indicating that the text is too small.

4. Change the attributes of the parent object

If the width and height of the parent object are fixed and the image size varies with the parent object, you can set the following parameters:

Overflow: hidden;

. In this example, you can add the following code to # sub:

Width: 88px; height: 31px; overflow: hidden;

5. Set floating attributes of images

Add a line of CSS code in this example:

# Nav img {float: left ;}

This method is a good choice to achieve text-and-text mixing.

6. Cancel the space between the Image Tag and the last ending tag of its parent object.

For example:

Copy to ClipboardReference: [www.bkjia.com]
<Div style = "width: 195px; height: 24px; clear: both; background: # B51D9F;"> Webpage Design </div>
Corrected:
<div style = "width: 195px; height: 24px; clear: both; background: # B51D9F;"> Webpage Design </div>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.