In Asp.net, the bottom of the IMG is blank.

The following items, except the first one, are reprinted content: /*************************************** * ******/when you recently worked on a project, use the table, Div, and CSS layout. After the IMG (image) is added to the top, there is always a blank space at the bottom.

After finding a large amount of information, the problem was finally solved.

An online friend said that he encountered IE6 during Div + CSS formatting on the page (sometimes in Firefox) the problem of unnecessary blank space under the IMG Image Element in the browser is absolutely common. 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 excess space under the IMG Image Layout for your reference.

 

1. convert an image into a block-level object

That is, set the IMG style:

Style = "display: block ;"

Or add a set of CSS in this example.Code:

# IMG {display: block ;}

(Note: I tested this method in my environment, but it still didn't solve the problem. So I changed it and solved the problem!

Method: IMG {display: block ;}

)

 

After testing, this method can solve.

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:

# IMG {vertical-align: Top ;}

Or

Style = "vertical-align: Top ;"

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

That is, add a row in # Table CSS:

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 CSS in # table:

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

5. Set floating attributes of images

Add a line of CSS code in this example:

# 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.

This method should be emphasized that this method may be messy during actual development, because when writing code, in order to make the code more semantic and hierarchical, it is inevitable to provide code indent display through IDE, which will inevitably display labels and other labels with line breaks, such as DW's"Apply source format"Command.

Therefore, this method can be used for us to understand a case where a bug occurs. For specific solutions, please refer to the steps for splitting.

 

conversion from: http://zhf.cnblogs.com/