CSS 背景颜色位置关闭答案

【问题标题】：CSS Background Color Position OffCSS 背景颜色位置关闭
【发布时间】：2013-11-21 23:11:12
【问题描述】：

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

谢谢。

【问题讨论】：

您的文字可能高于10px?
不清楚你在问什么……display:none 是干什么的……？
我正在使用 jQuery 来实现工具提示效果。如果您转到 storyville.jonmarkoff.com/storyvillewp 并将鼠标悬停在任何图像上，您可以看到它。

标签： html css

【解决方案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;
}

【讨论】：

只是删除高度而不添加行高。谢谢！
因为overflow:hidden; 概率;)
没问题！编码愉快！

【解决方案2】：

您的框的高度为 10 像素，并且您的字体大小未指定，因此可能更大。

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

【讨论】：