May 30, 2021 Article blog
In the page's HTML-CSS layout, encounter IE6 (of course, sometimes Firefox will occasionally encounter) the picture element img under the problem of excess white space is absolutely common, for the solution to this problem is also "see the machine", according to the reasons for different to use different solutions, here to solve the image picture layout directly under the redundant gaps of the BUG common methods summarized for your reference.
That is, set img to:
display:block;
In this example, add a set of CSS code:
#nav img {vertical-align:top;}
That is, setting the vertical-align property of the picture to "top, text-top, bottom, text-bottom" can also be resolved. As in this example, add a set of CSS code:
#nav img {vertical-align:top;}
That is, add a line to the .nav:
font-size:0;
can solve the problem. B
ut it also raises new questions, where text cannot be displayed in the parent object. S
etting the text size of a child object can still be displayed even if the text portion is enclosed by the child object, but prompts for an error that the text is too small when the CSS validates.
4, change the property of the parent object
If the parent object is wide and high, and the picture size depends on the parent object, you can set:
overflow:hidden;
to solve. In this example, you can add the following code to the #sub:
width:88px;height:31px;overflow:hidden;
That is, add a line of CSS code to this example:
#nav img {float:left;}
This approach is a good choice if you want to implement graphic mixing.
Like what:
<img src="https://www.w3cschool.cn/" />
<div style="width:195px; height:24px;clear:both; background:#B51D9F; ">网页设计</div>
修正为：
<img src="https://www.w3cschool.cn/" />
<div style="width:195px; height:24px;clear:both; background:#B51D9F; ">网页设计</div>