Gap between border and text

Question

I don't know why I'm getting a big space between the top border of TextContainer and the text. (I do have a browser reset)

CSS

#TextContainer {
    position: relative;
    width: 750px;
    height: 400px;
    top: 50px;
    margin: auto;
    border: 2px solid #000; 
    }

HTML

  <div id="Container">
    <div id="TextContainer">
      <font>(Text)</font>
    </div>
  </div>

JSFiddle.

Answer 1

In the id container change:

display: block

to

display: inline-block

Here is the change I made:

#Container {
    display: inline-block;
    position: relative;
    z-index: 2;
    width: 980px;
    height: 900px;
    background: #FFF;
    top: 5px;
    -webkit-transition: top, opacity;
    -webkit-transition-duration: 1.5s;
    }

works here is the jsfiddle.

http://jsfiddle.net/UbVz7/1/

To clarify the height auto and the block inline.

If you want to set the height to 400px like you have, you will need to set the display: inline-block as I have showed you above.

If you want to make the div auto which will take the size of the content added to the div then it is possible to add height: auto;

 #Cabeçalho {
display: block;
position: relative;
z-index: 2;
width: 980px;
height: auto;
background: #FFF;
}

This is because the height being set to 400px is pushing down anything that is in a block element to achieve its 400px.

The inline-block allows the data to overlap which pushes the text back up where you want it.

This is because of your overlapping effect.

With a block element when something does not fit, it is pushed to the next line.

Answer 2

I don't know why but if you change the height to auto, the space goes away. Maybe an alignment issue?

 #Cabeçalho {
display: block;
position: relative;
z-index: 2;
width: 980px;
height: auto;
background: #FFF;
}