How to solve the problem of gaps in CSS pictures

This article mainly introduces the CSS picture below has the gap 6 kinds of solutions, the need for friends can refer to the following

In the p+css layout of the page, encountered IE6 (of course, sometimes Firefox will encounter) in the browser of the picture element img Under the extra blank space problem is absolutely common to the problem of the solution is also " "According to the reasons of the different to use different solutions, here to solve the image image layout directly below the extra gap of the common methods of the general method of induction, for your reference."

1. Convert the picture to block-level image

That is, set the IMG to:

Display:block;

In this example, add a set of CSS code:

#sub img {display:block;}

IE6/7 invalid

2. Set the vertical alignment of the picture

That is, setting the Vertical-align property of the picture to "top,text-top,bottom,text-bottom" can also be resolved. Add a set of CSS code in this example:

#sub img {vertical-align:top;}

3. Set the Parent object's text size to 0px

That is, add a line to the #sub:

font-size:0;

can solve the problem. But this also raises new questions that cannot be displayed in the parent-to-image text. Even if the text part of the quilt to the image, set sub-text size can still be displayed, but in the CSS when the validation will prompt the text too small error.

4. Change the properties of the parent object

If the parent object is wide and high fixed, the picture size is determined by the parent pair image, then it can be set: Overflow:hidden; To solve.

As in this example, you can add the following code to #sub:

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

5. Set the floating properties of the picture

In this case, add a line of CSS code:

#sub img {float:left;}

This approach is a good choice if you want to achieve a picture-and-text mix.

6. Cancels the space between the picture label and the last end tag of its parent object.

This method to emphasize, in the actual development of the method may be a mess, because in the code to make the code more semantic and clear, it is unavoidable to provide code indentation through the IDE, which will inevitably let the label and other labels line display, such as DW's "format source" command. So this method can provide us with an understanding of the occurrence of a bug, the specific solution will have to see you recruit.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!