1

我一直在研究和努力解决这样一个奇怪的问题。我有一个应该包含一些文本的 div。这个 div 应该能够使用该文本调整大小，因此如果有两行文本，则 div 会变得更高，等等。一切似乎都很好，但由于某种原因，文本顶部添加了某种填充和文本的底部。我找不到导致填充的原因，我真的想让 div 更紧凑地适合文本。这是我正在谈论的图像：

http://i.imgur.com/ZblaLJX.png

浅蓝色框的高度应该更短，以便更贴合文本。这是我的这个 div 的 CSS 代码：

.captionCSS {
    max-width:70%;
    margin-top:10px; 
    margin-bottom:20px; 
    padding-left:5px; 
    padding-right:5px;
    padding-top:0px; 
    padding-bottom:0; 
    background-color:#aef7f8; 
    overflow:hidden; 
    color:black; 
}

我已经弄乱了所有的边距和填充，将它们设置为零，然后再次将它们设置回来，似乎没有任何效果。行高是从另一个 div 继承的，为 18px，而字体大小为 12px，我尝试降低行高，但它对顶部和底部填充/间隙没有任何影响。

此外，当文本占据两行时，情况会变得更糟，因为侧面有额外的填充，我想去掉：

http://i.imgur.com/Ecdxdtq.png

所以，是的，这是我的问题。理想情况下，我希望从 div 的边缘到文本顶部有 5px 的间隙，所以如果有任何办法，请告诉我！非常感谢你的帮助！

4

2 回答 2

1

您可以尝试以下方法。

如果您的代码与此类似：

<p>Some text with <span class="captionCSS">highlighted text</span>.</p>

应用以下 CSS 规则：

p {
    background-color: gray;
    padding: 5px;
}
.captionCSS {
    max-width:70%;
    padding: 0 5px;
    background-color:#aef7f8; 
    display: inline-block;
    line-height: 1.00;
}

如果设置display: inline-block为标题包装器，那么行高值会产生一些影响。

line-height: 1.00强制行高与元素的字体大小相同。如果您将该值设置为小于 1，您将获得更紧密的配合，但您也可以根据字体剪裁某些字符的升序和降序。

参见演示：http: //jsfiddle.net/audetwebdesign/2cyaF/

于 2013-09-19T22:21:23.040 回答
0

如果没有 HTML，我无法确定，但我的第一个猜测是文本有一个已经有样式规则的父块级元素。（例如：<hX>或<p>）

您可以通过执行以下操作通过 css 清除这些样式：

h1,h2,h3,p{
    padding:0;
    margin:0;
}

以下是一些使用您的风格的示例：http: //jsfiddle.net/JTrWL/

于 2013-09-19T22:12:32.267 回答