CSS文本重叠

Question

如何实现this

之类的功能

我尝试了边距和填充，但它们似乎没有工作。

Answer 1

小提琴：http://jsfiddle.net/UuEJ2/。

HTML：

<h1>Sample Text</h1>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

h1 {
    display: inline-block;
    font: bold 48px/1 Sans-Serif;
    background-color: #5e5e5e;
    padding: 10px 20px 0 20px;
    color: #eee;
    overflow: hidden;
    height: 40px;
}

Answer 2

使用height属性并使用em值可以达到预期效果。现在，如果增加字体大小，效果仍然相同。检查 DEMO 。

<强> CSS

h1{background:gold;  height:.9em;font-size:5em;color:white;overflow: hidden;}

<强> HTML

<h1>Sample Text</h1>