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