顶部

Question

这jsfiddle看起来是这样的：

我希望它看起来像这样（我创造了这个与MS油漆）...冲洗：

有什么我可以添加到样式来实现这一目标吗？

div { 
    border: 1px solid blue; 
    font-size: 50px; // this number should be treated as arbitrary 
} 

Answer 1

一个选项是使用line-height。金额将取决于您使用的字体家族。好处是line-height可以直接依赖于字体大小，因此它可以是动态的。但是，它没有单独的垂直顶部和底部概念（它适用于两者），因此您不会在文本下留下该空间。

div { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
    font-family: 'Times'; 
 
    line-height: 0.7; /* This will work for any font-size on 'Times'*/ 
 
}

<div>Hello</div>

你可以通过包装与边距的元素的文本模拟出底部空间。

div.outer { 
 
    border: 1px solid blue; 
 
    font-size: 70px; 
 
} 
 

 
div.inner { 
 
    font-family: 'Times'; 
 
    line-height: 0.7; 
 
    margin-bottom: 20px; 
 
}

<div class="outer"> 
 
    <div class="inner">Hello</div> 
 
</div>

Answer 2

另一种选择是使用相对定位。此方法优于行高的优点是div大小不变。

div { 
 
    border:1px solid blue; 
 
    font-size: 64px; // works for arbitrary font sizes 
 
} 
 
span{ 
 
    position:relative; 
 
    top:-0.21em; 
 
}

<div> 
 
    <span>Hello</span> 
 
</div>

与线高，你可能需要调整 “-0.21em” 这取决于你的字体。 -0.21em对我来说很适合无衬线和衬线，但不能草写。