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，你的字体大小没有指定，所以可能更大。

将font-size和line-height与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;
}

CSS背景颜色位置关闭

2 个答案: