CSS 技巧 - 删除文本和 div 边框之间的顶部和底部空格

Question

我在div里面有一个文本。我想要的只是摆脱文本和div 边框之间的顶部和底部空格。你能帮帮我吗？

.HTML：

<div id="text">APPLE</div>

.CSS：

#text {
float:left;
font-size:3em;
color: black;
}

Answer 1

你需要玩

弄line-heighthttp://jsfiddle.net/ysqs6veu/

为简单起见，我在高度中使用了百分比，因此这应该适用于所有字体大小。

#text {
    float:left;
    font-size:3em;
    line-height: 65%;
    color: black;
}

Answer 2

使用"行高属性"。它将起作用。

#text {
  float: left;
  font-size: 3em;
  color: black;
  border: 1px solid red;
  padding: 5px;
  line-height: 23px;  /*Change the value according to your choice*/
}

Answer 3

Twy 与em单位。它相对于元素的字体大小。尝试使用 -

#text {
  float:left;
  font-size:3em;
  color: black;
  line-height: .7em;
}

它将根据字体大小自动计算。

Answer 4

你也可以试试这个...

#inner{
     margin: -8% 0px -8% 0px;
}
<div id="text">
   <div id="inner">APPLE</div>
</div>