Question

我一直在研究和努力解决这个奇怪的问题。我有一个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的间隙，所以如果还有，请告诉我！非常感谢你的帮助！

Answer 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强制行高与元素的font-size相同。如果您将该值设置为小于1，您将获得更紧密的拟合，但您也可以根据字体剪辑某些字符的上升和下降。

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

Answer 2

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

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

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

以下是使用您的样式的一些示例案例：http://jsfiddle.net/JTrWL/

包含div的文本制作周围的奇怪填充太大

2 个答案: