包含文本的双水平线之间的间隙

Question

这就是我现在所拥有的，但我需要调整标题上两行的间隙，使其看起来像底部的水平规则。

当我调整它为border-top: 5px double black;时，它会使线条变粗，只需要将它分开并保持较薄。

这是我的HTML：

<h4><span>Sample sample sample</span></h4>
<p>lorem ipsum</p>
<hr>

这是我的CSS：

h4 {
    width: 100%;
    text-align: center;
    border-top: 4px double black;
    height: 10px;
    line-height: 0.1em;
    margin: 30px 0;
    font-size: 29px;

    span {
        background-color: white;
        padding: 0 10px;
    }
}

hr {
    border-bottom: 1.5px solid black;
    border-top: 1.5px solid black;
    border-left: none;
    border-right: none;
    height: 10px;
}

这是一个fiddle。

Answer 1

从中删除一个边框：

hr {
    /* border-bottom: 1.5px solid black; */
    border-top: 1.5px solid black;
    border-left: none;
    border-right: none;
    height: 10px;
}

小提琴：http://jsfiddle.net/anh7qtd1/