本文介绍了html,css - 奇怪的无形边缘下面的图片的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要去香蕉这里,不知何故下面我的所有的图像在我的页面有一个差距,一个保证金
wich是不是在代码中。
即使Firebug看不到它,但Firefox和Safari正在渲染它 - 偶尔没有CSS在所有!

i’m going bananas here, somehow below all of my images in my page there is a gap, a marginwich isn’t there in the code.Even Firebug can’t see it but Firefox and Safari are rendering it - EVEN WITHOUT CSS AT ALL!

永远不会发生给我之前...! / p>

Never happend to me before...!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>

    <div id="container">
        <div id="sidebar">
            <img src="images/logo.png" id="logo" />
            <ul id="menu">
                <li class="menu1">Main</li>
                <li class="menu1">System</li>
                <li class="menu1">View</li>
                <li class="menu1">Policy</li>
            </ul>
            <div id="sidebar_bottom"></div>
        </div>
        <div id="main_content"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

body{
    background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
    width:864px;
    margin: 8px auto 0 auto;
}
#sidebar{
    /*width:139px;*/
    float: left;
}
#sidebar_bottom{
    height:10px;
    background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
    margin-bottom: 2px;
}
#sidebar #menu{
    background: #f2f2f2;
    border: 0 1px solid #cecece;
    margin: 0;
    list-style: none;
}


推荐答案

。这是因为图像是一个内联元素,所以在图像底部(放置在文本的基线和文本行的底部)之间有一些空格。

This is actually not that uncommon. It's because the image is an inline elements so there is some space between the bottom of the image, which is placed on the base line of the text, and the bottom of the text line.

最简单的解决方案是简单地使用 display:block; 将图像转换为块元素。使用 float:left; float:right; 浮动图像也可以将其变成一个块元素

The easiest solution to this is to simply use display:block; to turn the image into a block element. Floating the image using float:left; or float:right; also works as that also turns it into a block element.

调整属性,例如 vertical-align font-size line-height 也可能影响距离,但它不如其没有真正删除效果那么强大。它可能仍然会出现在某些情况下

Adjusting properties like the vertical-align, font-size and line-height may also affect the distance, but it's not as robust as it doesn't really remove the effect. It might still appear in some circumstances.

相关问题:结果
的结果
的结果

Related questions:
Unwanted spacing below images in XHTML 1.0 Strict
Why have my images got extra spacing?
IE image spacing issue

这篇关于html,css - 奇怪的无形边缘下面的图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-01 02:55