Question

当在div中包含文本时，我在文本的顶部找到了一个小的边距。如何摆脱边缘？

<html>
  <style>
  	#box{
  		width:200px;
  		height:100px;
  		font-size:50px;
  		background-color:#ff0000;
  		color:#ffffff;
  	}
  </style>
  <body>
  <div id="box">TEXT</div>
  </body>
</html>

Answer 1

<html>
  <style>
  	#box{
  		width:200px;
  		height:100px;
  		font-size:50px;
  		background-color:#ff0000;
                line-height:38px; /* reduce line height for desired results */
  		color:#ffffff;
  	}
  </style>
  <body>
  <div id="box">TEXT</div>
  </body>
</html>

Answer 2

您需要更改line-height。我把它设置在这里没有空间。

#box{
    width:200px;
    height:100px;
    font-size:50px;
    line-height: 33px;
    background-color:#ff0000;
    color:#ffffff;
}

Answer 3

您可以使用line-height确实减少文本顶部和下方的差距，但也许您应该使用 em 值来使其更加可靠。

#box {
  width: 200px;
  height: 100px;
  font-size: 50px;
  background-color: #ff0000;
  line-height: 0.65em;
  color: #ffffff;
  box-shadow: 0 0 3px black;
}
div:hover {
  font-family: courier;
}
span {
  vertical-align: top;
  font-family: courier;
}

<div id="box">TEXT<span>text</span>
</div>

为什么文本顶部有余量？

3 个答案: