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