css - 文本周围的奇怪填充使包含的 div 太大

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

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