CODEWITHSUNDEEP
htmlcssspacing
user2442072
user2442072

Reputation: 457

Unknown origin of space between 2 div elements

There is a sizeable space between 2 div elements, div header and div content, in my php page, and I cannot figure out where it's coming from or why it's there.

HTML:

...
<div id="header">
HEADER
</div>
<div id="content">
  <h3>Login</h3>
  <form action="login.php" method="post">
...

CSS:

html {
height: 100%;
}

body {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
border-style: none;
background: black;
}

#header {
margin: 0px;
padding: 0px;
height: 15%;
width: 100%;
border-style: none;
background: #02F72F;
text-align: center;
}

#content {
margin-top: 0px;
padding: 0px;
height: 70%;
width: 100%;
border-style: none;
background: white;
text-align: center;
}
...

When implemented, there is a long black bar that separates the two divs visually. I know it's black because I specifically changed the background to black, but with the margins and padding set to 0, I don't know why there is a space to begin with. Do div elements have a default spacing and how can I override this?

Upvotes: 2

Views: 2956

Answers (2)

user1693593
user1693593

Reputation:

You can enter a float:left for the two elements and the space will go away (between them - the remaining 15% will of course still be there):
http://jsfiddle.net/AbdiasSoftware/ENGx9/

#header {
    float:left;
    ....
}

#content {
    float:left;
    ...
}

Optionally, the h3 tag's margin pushes the div down - you can modify the tag like this instead to use padding to give the header some room:

h3 {
    margin:0;
    padding:10px 0;
}

Example:
http://jsfiddle.net/AbdiasSoftware/ENGx9/1/

Upvotes: 2

Chubby Boy
Chubby Boy

Reputation: 31062

You have given, height: 15%; for your header and height: 100%; for your body. so your header will occupy 15% of the height of the body. So you see a space there for the corresponding 15% height.

Upvotes: 3

Related Questions