境界線を左右に近づけること

Question

私は境界線を左右に持っていて、それらを互いに近づけて、左右に空白ができるようにしたいと思います。私はパディングと負のマージンを試してみましたが、成功しませんでした。

私はいくつかの白の右側のスペースとそれらの左が存在することになるので、これらの2本の赤い線が互いに近くになりたい

.verticalLine { 
 
    display: table-cell; 
 
    height: 100%; 
 
    width: 10%; 
 
    border-left: 0.13em solid #ff0000; 
 
    border-right: 0.13em solid #ff0000; 
 
}

<div class="verticalLine"> 
 
</div>

。コード

<div style="display: table-row;"> 
<p>Lfdskopfdksoppokfsdpokfs</p> 
<div class="verticalLine"> 
</div> 
</div> 

p{ 
    word-break: break-all; 
    display: table-cell; 
    width: 45%; 
} 
.verticalLine:before{ 
    content: ""; 
    display: block; 
    border-left: 0.13em solid #ff0000; 
    border-right: 0.13em solid #ff0000; 
    height: 100%; 
    width: 60%; 
    margin-left: 20%; 
    box-sizing: border-box; 
} 
.verticalLine { 
    display: table-cell; 
    width: 10%; 
} 

Answer 1

を更新あなただけの垂直線を作成するために、擬似要素:beforeを使用することができます。

EDITを（私はこのdiv要素の幅を変更する必要はありません）。親のものより小さくするだけです（例： 60%であり、隙間の対応するマージン、例えばこの場合には辺に対応する。 margin-left: 20%;。最後にbox-sizing: border-box;を使用して、幅に罫線を含め、要素を適切に配置します。

私はそれが簡単に参照できるようにすること黒の境界線を追加しました：

.line { 
 
    display: table-cell; 
 
    height: 100px; 
 
    width: 10%; 
 
    border: 1px solid; 
 
} 
 
.line:before { 
 
    content: ""; 
 
    display: block; 
 
    border-left: 0.13em solid #ff0000; 
 
    border-right: 0.13em solid #ff0000; 
 
    height: 100%; 
 
    width: 60%; 
 
    margin-left: 20%; 
 
    box-sizing: border-box; 
 
}

<div class="line"> 
 
</div>

Answer 2

あなたが代わりに国境やスタイルのあなたの要素の背景をCSS3グラデーションを使用することができます。

table{ 
    width: 100%; 
} 

td { 
    background: linear-gradient(to right, 
    #fff 0%, 
    #fff 20%, #c00 20%, #c00 calc(20% + 2px), #fff calc(20% + 2px), 
    #fff 80%, #c00 80%, #c00 calc(80% + 2px), #fff calc(80% + 2px), 
    #fff 100%); 
    width: 50%; 
    height: 200px; 
} 

DEMO