摆脱div

Question

以下是Chrome开发者工具所显示的div代码的边界框。 font-size和line-height都设置为100px。 margin和padding属性设置为0。 div元素绝对位于网页上。

如何使文本从边界框的顶部开始？我需要摆脱“S”字符顶部的空格。

如果不可能摆脱空白区域，有没有办法计算它的高度？

这是一个显示问题的小提琴： https://jsfiddle.net/zw4g1uuj/

Answer 1

我注意到你的JSFiddle看到行高可能是你看到空格的原因的主要因素。在font-size 100中，div的边界框将适合文本，并且您使用lineheight 100将其居中。问题是当您有一个具有无限高度的div时（在这种情况下，文本就是框的内容）大小为），你还要添加另一个因素来调整div的大小（lineheight），当你不想要它时会导致白色空间出现在顶部。通过减少线高，让我们在JSFiddle中说80，我可以轻松地使顶部空白区域减少。

如果您将div限制为可能固定高度为120，然后将其线性化为120，则文本将居中，顶部和底部均匀间隔。减小接近字体大小的盒子的固定大小并调整线条高度可以挤出更多的空白。

这是一个可以解决的问题。我总是在预测线路高度行为方面遇到麻烦，因此最好对此进行试验。来自父容器的任何CSS代码或您如何设计有问题的元素都可能会干扰它。

不仅如此，字体可以轻松添加空格，因为CSS本身没有任何错误，可能只是字体顶部的像素比底部的像素多一些。

Answer 2

简短的回答是你必须同时使用你的字体大小和行高，直到找到你想要的东西。在JSFiddle中使用它来获取样式......

font-size: 100px;
line-height: 75px;
border: 1px solid red;