HTML/CSS:重叠文本周围的公共边框

Question

如何为此编码？

当我们有这个:

如

<html>
    <head>
        <style>             
            h2
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position:absolute;
                top:0px;
            }
            h3
            {
                letter-spacing:4pt;
                font-size:40pt;
                color:blue;
                text-align:center;
                position: absolute;
                top:20px;
                left:20px;
            }
        </style>
    </head>

    <body>
        <h2>All right, Mate?</h2>
        <h3>All right, Mate?</h3>
    </body>
</html>
</html>

...而不更改原始功能/标签.
只添加(或修改)一点.

Answer 1

将其包裹在div中并设置边框.

尝试将您的HTML更改为:

<div>
    <span id="h2">All right, Mate?</span>
    <span id="h3">All right, Mate?</span>
</div>?

你的css对此:

div {
    padding : 5px;
    border: 3px solid red;
    height: 70px;
    width: 440px;
}
div span {
    width: 420px;
    display: block;
    letter-spacing:4pt;
    font-size:40pt;
    color:blue;
    position: relative;
}
div span#h2
{
    top:0px;
}
div span#h3
{
    top:-50px;
    left:20px;
}?

小提琴:http://jsfiddle.net/maniator/PJT9V/