Question

乱搞一些CSS试图学习一些东西，因为我之前没有做过多的事情，而且我遇到了一个问题，我在图像标签和ul标签之间有少量空间而无法计算如何摆脱它。

enter image description here

我正在谈论图像和黑条之间的空间，如上图所示。

该页面的源代码如下（在asp.net mvc3中）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="header">
            <img src="@Url.Content("~/Content/b.png")" alt="Infomaster" />
            <ul id="menu" >
                <li>Home</li></ul>
        </div>
        <div id="content">
            @RenderBody()
        </div>
        <div id="footer">
            footer
        </div>
    </div>
</body>
</html>

我的css如下所示

html, body
{
    font-size: 1.0em;
    font-family: Arial, sans-serif, Verdana, Garamond, "Segoe UI";
    color: #232323;
    background-color: #414042;
    height: 100%; /* needed for container min-height */
}
div#container
{
    position: relative; /* needed for footer positioning*/
    margin: 0 auto; /* center, not in IE5 */
    height: auto !important; /* real browsers */
    height: 100%; /* IE6: treaded as min-height*/
    min-height: 100%; /* real browsers */
    background-color: White;
    border-radius: 15px;
    min-width: 920px;
    width: 52%;
}



div#header
{
    padding: 1% 1% 0px 1%;
    margin: 0px;
}

div#footer
{
    position: absolute;
    width: 100%;
    bottom: 0; /* stick to bottom */
}

#menu
{
    background-color: Black;
    color: White;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

我已经弄乱了各种填充，边距等，但似乎无法摆脱它，也在布局窗格中的IE Web开发人员工具栏中它显示我有一个偏移（没有别的）但是当我改变它没有任何影响。

我认为这是一件我想念的小事，但我会感激一些帮助。

干杯

Answer 1

#header img {
    display:block;
}

简单就是那个

Answer 2

将您的<img>标记放在div中，如下所示：
<div class="myimg"><img src="img_url" /></div>

CSS

.myimg { width: IMG_WIDTH px; height: IMG_HEIGHT px; overflow: none; }

这应该摆脱你的空白

Answer 3

#menu
{
    background-color: Black;
    color: White;
    list-style: none;
    margin: 0px;
    padding: 0px;
    display:block;
    margin-top:-??px; //Here ?? is the unwanted space between the image and the bar
}

css定位差距

3 个答案:

CSS