0

我希望能够删除容器内文本顶部和底部的“空格”。

在此处输入图像描述

div 必须尽可能靠近里面的文字。此文本是输入的结果，可由用户更改。

我想我应该使用 line-height，但是如何？

任何建议将不胜感激！

4

4 回答 4

6

曾经line-height

.some_css{
line-height: px; // according to your text size of design 
}
于 2012-12-06T10:29:59.223 回答
2

您可以使用padding: 0' 或尝试line-height:px

  1. 填充做什么

在此处输入图像描述

零填充

在此处输入图像描述

  1. 和线高

在此处输入图像描述

于 2012-12-06T10:37:28.380 回答
2

使用 CSSpadding属性在元素的边界内设置空间：

padding:0;

此外，正如 Terric 所指出的，如果孩子有边距，请将其删除：

margin:0;
于 2012-12-06T10:29:55.340 回答
1

如标题中所述，我需要“动态”删除文本周围的空间。事实上，每种字体都有不同的结构，并且不会在每个浏览器上以相同的方式呈现......

我为此找到了一个折衷方案：

.text { line-height: 70% }

正如这里所解释的，如果我们使用百分比，我们可以将任何字体大小应用于我们的文本，行高将始终相同。

我可以使用 jQuery 更改字体大小，行高将始终正确应用于文本和周围元素。

我为每种字体处理了一个大小写函数以应用不同的行高。就我而言，这是一个可行的解决方案...

var fontFamily = $( "input" ).val(); // Here, the font-Size is defined dynamically by the user... It could be Arial, Verdana, Comic etc...
var lineHeight;

switch ( fontFamily ){

    case "Arial Black": // if the user has selected the arial black font...
        lineHeight = "70%"; // we define a line-height that will be correctly applied to the text
        break;
    case "Verdana":
        lineHeight = "78%";
        break;
    default:
        lineHeight = "66%";

}

$( ".text" ).css("line-height", lineHeight); // we apply the line-height to the text...

请注意，用户还可以使用另一个选择元素更改字体大小...

希望这可以帮助...

于 2012-12-06T19:58:46.130 回答