css - 1px の仕切りがコンテナ内に完全に配置されていない

Question

単一の水平バー Eg、A、BC、D の 4 つのセクション間に 1px の仕切りを作成しようとしています。各セクションとこの水平の境界線の間に、上部のパディング = 10px と下部のパディング = 10 px を維持する必要があります。バー。また、A と B の間に 1 ピクセルの垂直方向の仕切りを保持する必要があります。10 ピクセルと 1 ピクセルの仕切りの上部と下部のパディングも作成できます。しかし、1px のライン ディバイダはいっぱいではありません。これは、上部のバーから下部のバーに触れていないことを意味します。テキストが配置される中央にのみ配置されます。誰かが1pxの仕切りを全長に拡張する方法を教えてもらえますか?

コードスニペット

<div class="top-bar">
        <div class="sub-section" >
            <p style="padding-left: 30px;">vvvvv</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 30px;">ysadfafdaafaf</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 30px;">werwtrwer rtyryryrytr</p>
        </div>
        <div class="sub-section">
            <p style="padding-left: 38px;">xsvcsfwr</p>
        </div>
    </div>



.top-bar{
width:800px;
float:left;
padding-bottom: 10px;
padding-top:10px;

}
 .sub-section{
width:200px;
float:left;
border-right: 1px solid #FFFFFF;

}