中間行とテキストの間にスペースを作るには？

Question

それで、私は何をしようとしています中間線と中間のテキストの間にスペースを作ることです。これは私のフィドルです：https://jsfiddle.net/abqy4w1f/。だから私は、左と右の側が円から10pxしたい。なにか提案を？

.outter-h2 { 
 
    width: 200px; 
 
    text-align: center; 
 
    border-bottom: 1px solid #cccccc; 
 
    line-height: 0.1em; 
 
    margin: 35px auto 35px; 
 
} 
 
.outter-span { 
 
    background: #fff; 
 
    padding: 0 10px; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 50%; 
 
    color: #bec3c7; 
 
}

<h2 class="outter-h2"><span class="outter-span">?</span></h2>

Answer 1

正しいかないです場合は、この操作を行うCA教えてください：

.wrapper{ 
 
    display: inline-block; 
 
} 
 
.outter-h2 { 
 
    float: left; 
 
    width: 100px; 
 
    text-align: center; 
 
    border-bottom: 1px solid #cccccc; 
 
    margin-top: 4%; 
 
} 
 
.outter-span { 
 
    float: left; 
 
    background: #fff; 
 
    padding: 0 10px; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 50%; 
 
    color: #bec3c7; 
 
    margin: 0 10px; 
 
}

<div class="wrapper"> 
 
<div class="outter-h2"></div> 
 
<span class="outter-span">?</span> 
 
<div class="outter-h2"></div> 
 
</div>

Answer 2

<h2 class="outter-h2"></h2><span class="outter-span">?</span> 
    <h2 class="outter-h2"></h2> 

Click here for DEMO

Answer 3

<h2 class="outter-h2"></h2><span class="outter-span">?</span><h2 class="outter-h2"></h2> 

.outter-h2 { 
     width: 100px; 
    text-align: center; 
    border-bottom: 1px solid #cccccc; 
    line-height: 0.1em; 
    margin: 20px auto 35px; 
    float:left; 
} 
.outter-span { 
    background: #fff; 
    padding: 0 10px; 
    border: 1px solid #cccccc; 
    border-radius: 50%; 
    color: #bec3c7; 
    margin: 10px; 
    float:left; 
} 

私は、これはあなたが望んでいた解決策だと思うこれを試してみてください。私は、この特定の例えば

Answer 4

これは正確に何をしたい（訂正）に行われます。

.outer-h2 { 
 
     width: 100px; 
 
    text-align: center; 
 
    border-bottom: 1px solid #cccccc; 
 
    line-height: 0.1em; 
 
    margin: 20px auto 35px; 
 
    float:left; 
 
} 
 
.outer-span { 
 
    background: #fff; 
 
    padding: 0px 10px; 
 
    color: #bec3c7; 
 
    margin: 10px; 
 
    float:left; 
 
}

<h2 class="outer-h2"></h2><span class="outer-span">?</span><h2 class="outer-h2"></h2>

Answer 5

あなたは簡単に

あなたがしなければならないのが追加され（これは影の色と背景色が同じであると仮定している）CSSにbox-shadowプロパティを使用して偽のスペースを作成することができます

この行を.outer-span：

ボックスシャドウに変更する：0 0 5px 20px #FFF;

この解決策は、HTMLをそのまま維持します。

デモ：あなたはすでに `パディングを与えている

body { 
 
    background: #FFF; 
 
} 
 

 
.outter-h2 { 
 
    width: 200px; 
 
    text-align: center; 
 
    border-bottom: 1px solid #cccccc; 
 
    line-height: 0.1em; 
 
    margin: 35px auto 35px; 
 
    position: relative; 
 
    z-index:1; 
 
} 
 

 
.outter-span { 
 
    background: #fff; 
 
    padding: 0 10px; 
 
    border: 1px solid #cccccc; 
 
    border-radius: 50%; 
 
    color: #bec3c7; 
 
    position: relative; 
 
    z-index:3; 
 
    box-shadow:0 0 5px 20px #FFF; /*add space using box-shadow*/ 
 
}

<h2 class="outter-h2"><span class="outter-span">?</span></h2>