Пробел между двойной горизонтальной линией, обертывающей текст

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; 
} 

Fiddle: http://jsfiddle.net/anh7qtd1/