Question

我正在为学校项目做一个网页我遇到了这个问题。

我有一个包含标题的div和一个带水平导航栏的div。在这些div之间存在差距。我已阅读了我的代码，但无法找到原因。

无论我什么似乎都无能为力。

我已经将所有元素的margin / padding设置为0px而没有运气。

以下是代码：

ASP / HTML

   <html xmlns="http://www.w3.org/1999/xhtml">
<link href="StyleSheet.css" rel="stylesheet" />
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="wrapper">
            <div id="header">
                <asp:Image ImageUrl="_res/Logo.png" runat="server" />
                </div><div id="menuBar">
                    <asp:Image ImageUrl="_res/menubar.png" runat="server" />
                </div>

                <asp:ContentPlaceHolder ID="cphMain" runat="server">
                </asp:ContentPlaceHolder>


        </div>
    </form>
</body>
</html>

CSS

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #2e261e;
    background-image:url(_res/sides.png);
    background-repeat:repeat-x;
}

#wrapper {
    width: 960px;
    margin-left:auto;
    margin-right:auto;
}
#header {
    margin:0px;


}

#menuBar {
    margin: 0;

}

我已经尝试display:block，什么也没做。对于极其糟糕的措辞问题抱歉。

Answer 1

不幸的是，我（个人）从未使用过ASP。但是，从我可以收集到的内容来看，您想要做的事情在标准HTML中非常简单。这是我的HTML代码：

<div id="wrapper">
    <div id="header">
        <img src="http://s26.postimg.org/vqdkaohmd/logo.png" />
        </div><div id="menuBar" align="right">
            <img src="http://s26.postimg.org/5tjvy2dyx/lnks.png"/>
        </div>
</div>

我删除了您的'表单'代码，因为我们只需要您的用户打算使用表单（显然），就像登录表单一样 - 即使这样，表单标记也不会遍及整个页面。

这是一个JSFiddle：http://jsfiddle.net/gSAW4/1/
如果您有任何想要我解释或帮助您的事情，请告诉我

Answer 2

答案是在我的css文件中将这些div的line-height属性设置为0。我不知道最初设置的行高是多少，但它确实有效。

Answer 3

你已经回答了自己，但我想知道这是否存在差距。你经历的总是低于图像吗？不是块元素，我曾经在底部有1px的边距，即使重置边距也是如此。我通常需要进行显示：阻止图像移除1px间隙。

div之间的水平空间

3 个答案: