Horizontal space between divs

StackOverflow https://stackoverflow.com/questions/22305309

  •  12-06-2023
  •  | 
  •  

题

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. Between those divs there is a gap. 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.

Here is the code:

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;

}

I have tried display:block, does nothing.. Sorry for the extremely poor phrased question.

有帮助吗？

解决方案

The answer was to set the line-height property of those divs to 0 in my css file. I have no clue what the line-height was set to originally, but it worked.

其他提示

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. I usually have to do a display: block on images to have that 1px gap removed.

Unfortunately, I (personally) have never used ASP. However, from what I can gather, what you want to do is really simple in standard HTML. Here's my HTML code:

<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.

And here's a JSFiddle: http://jsfiddle.net/gSAW4/1/
Please let me know if there's anything you want me to explain or help you with further

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top