CSS Цвет фона Положение Выкл.

Question

Я установил цвет фона для div, но по какой-то причине поле цвета не находится под текстом, но как 100px к вершине. Это мой HTML-код;

<div class="youtube_gallery_caption">The Fast Show - Unlucky Alf</div> 

и это CSS

.youtube_gallery_caption { 
background:red; 
color:black !important; 
width:140px; 
height:10px; 
padding:10px; 
position:relative; 
z-index:99; 
display:none; 
} 

Спасибо.

Answer 1

Удалить высоту и добавить line-height:30px ... изменить значение до любой высоты, которую вы хотите. Также добавьте overflow: hidden;. Вы также можете добавить дополнение к левому и правому, по сравнению со всеми, поэтому вы не добавляете высоту линии. Вместо этого будет удалить все отступы сверху и снизу padding:0 10px;

Попробуйте заменить свой CSS с этим:

.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

Ваша коробка имеет высоту 10px, и размер шрифта не определен так, скорее всего, больше.

Сопоставьте размер шрифта и высоту линии с фактической высотой div.

Например: (используя значение 10px):

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; 
}