div之间的水平空间

Question

I'm doing a webpage for a school project And I've run into this problem. 我正在为一个学校项目制作网页，但遇到了这个问题。

I have a div, which contains the header, and a div with the horizontal navigation bar. 我有一个div，其中包含标题，还有一个带有水平导航栏的div。 Between those divs there is a gap. 这些div之间存在差距。 I have read through my code and can't find out why. 我已经阅读了我的代码，找不到原因。

No matter what I seem to do nothing works. 不管我似乎做什么都不起作用。

I have already set margin/padding to 0px on all elements without luck. 我已经在所有元素上都设置了margin / padding为0px，而没有运气。

Here is the code: 这是代码：

asp/html 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 的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;

}

I have tried display:block , does nothing.. Sorry for the extremely poor phrased question. 我已经尝试过display:block ，什么也没做。

Answer 1

Unfortunately, I (personally) have never used ASP. 不幸的是，我（个人）从未使用过ASP。 However, from what I can gather, what you want to do is really simple in standard HTML. 但是，据我所知，在标准HTML中，您要做的事情确实很简单。 Here's my HTML code: 这是我的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>

I have removed your 'form' tag because we only need that if your user is going to use a form (obviously), like a login form - even then the form tag doesn't go around the whole page. 我删除了“ form”标签，因为我们仅在您的用户要使用表单（显然是登录表单）（例如登录表单）时才需要-即便如此，form标记也不会遍及整个页面。

And here's a JSFiddle: http://jsfiddle.net/gSAW4/1/ 这是一个JSFiddle： http : //jsfiddle.net/gSAW4/1/
Please let me know if there's anything you want me to explain or help you with further 如果您想让我解释或进一步帮助您，请告诉我

Answer 2

The answer was to set the line-height property of those divs to 0 in my css file. 答案是在我的css文件中将这些div的line-height属性设置为0。 I have no clue what the line-height was set to originally, but it worked. 我不知道线高最初设置为什么，但是它起作用了。

Answer 3

You already answered yourself, but I'd like to know if the 'gap' you experienced is always below the images? 您已经回答了自己，但是我想知道您遇到的“差距”是否始终在图像下方？ are not block elements and I used to have a 1px margin on the bottom, even when margin is resetted. 不是块元素，即使重置了边距，我过去在底部也有1px的边距。 I usually have to do a display: block on images to have that 1px gap removed. 我通常必须做一个显示：在图像上遮挡以消除1px的间隙。

div之间的水平空间

问题描述

3 个解决方案

解决方案1
0 2014-03-10 20:26:51

解决方案2
0 已采纳 2014-04-09 09:48:05

解决方案3
0 2014-04-09 09:53:06

div之间的水平空间

问题描述

3 个解决方案

解决方案1 0 2014-03-10 20:26:51

解决方案2 0 已采纳 2014-04-09 09:48:05

解决方案3 0 2014-04-09 09:53:06

解决方案1
0 2014-03-10 20:26:51

解决方案2
0 已采纳 2014-04-09 09:48:05

解决方案3
0 2014-04-09 09:53:06