<h> text not published inside <div>

Question

i have the following code, to display a div, and in the div a text: .html:

<div id="footer">
        <h4>text</h4>
    </div>

.css:

#footer {
height: 20px;
position: fixed;
opacity: 0.2;
background-color: #69D2E7;
bottom: 20px;
right: 10px;
width: 150px;
border: solid #000;
border-width: 1px;
text-align: center;
vertical-align: middle;
}
h4 {
font-family: calibri;
font-size: 14px;
}

for some reasen the h4 tekst is displayed UNDER my div. if i make the div higher: 50px instead of 20px the h4 fits in it, and its perfectly aligned.

how to get my h4 in my div (footer) ? so i get a small box, footer, and in it my text.

hope you can help :)

Answer 1

The <h4>'s default margin makes it look like it's being pushed out of the div. Add margin:0;

h4 {
    font-family: calibri;
    font-size: 14px;
    margin:0;
}

jsFiddle example

Answer 2

By default the heading tags have a margin. In this case the top margin of the H4 tag is pushing it out of the bounds of the footer box. If you apply a margin of 0 on the heading tag, it will fit.

h4 {
  font-family: calibri;
  font-size: 14px;
  margin: 0;
}

Example: http://jsfiddle.net/KnC3N/1/

You can read more about the default styles here: http://www.w3.org/TR/CSS2/sample.html