CSS Background Color Position Off - html

Question

I set a background color for a div, but for some reason the color box is not underneath the text, but like 100px toward the top. This is my HTML code;
<div class="youtube_gallery_caption">The Fast Show - Unlucky Alf</div>
and This is CSS
.youtube_gallery_caption {
background:red;
color:black !important;
width:140px;
height:10px;
padding:10px;
position:relative;
z-index:99;
display:none;
}
Thank you.

Answer 1

Remove height and add line-height:30px...change the value to whatever height you want. Also, add overflow: hidden;. You might also want to add padding to just the left and right, versus all around, so you're not adding to the line-height. Instead this will remove any padding on the top and bottom padding:0 10px;
Try replacing your CSS with this:
.youtube_gallery_caption {
background:red;
color:black !important;
width:140px;
line-height:30px;
padding:0 10px;
position:relative;
z-index:99;
display:none;
overflow:hidden;
}

Answer 2

Your box has a height of 10px, and you font-size isn't specified so is likely larger.
Match up the font-size and line-height with the actual height of the div.
Eg: (using the 10px value):
http://jsfiddle.net/D2g9H/
.youtube_gallery_caption {
background:red;
color: black !important;
width:140px;
height: 10px;
font-size: 10px;
line-height: 10px;
padding:10px;
position:relative;
z-index:99;
}