如何动态删除文本周围的空间？

Question

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

div必须尽可能接近内部文本。 此文本是输入的结果，可由用户更改。

我想我应该使用行高，但是怎么做？

非常感谢任何建议！

Answer 1

用于line-height

.some_css{
line-height: px; // according to your text size of design 
}

Answer 2

使用CSS padding属性在元素的边框内设置空间：

padding:0;

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

margin:0;

Answer 3

您可以使用padding: 0＆＃39;或者尝试line-height:px

1. 做什么填充

  



零填充

  



1. 和行高

  

Answer 4

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

我找到了妥协：

.text { line-height: 70% }

正如here所述，如果我们使用百分比，我们可以在文本中应用任何字体大小，行高始终相同。

我可以使用jQuery更改font-size，行高始终会正确应用于文本和周围元素。

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

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...

请注意，用户还可以使用其他选择元素更改font-size ...

希望这可以帮助......