html - Webページ全体に縦に伸びる縦線の作成

Question

テキストがあり、Web ページ全体に垂直に広がる左右の境界線をテキストに付けたいと考えています。これは私のhtmlです

<div id="vLine">
    <h1>text</h1>
</div>

これは私のcssです

#vLine {
    height: 100%;
    width: 50px;
    border-left: 3px solid black;
    border-right: 3px solid black;

高さを 100% に設定しても、行の上部と Web ページの上部の間にわずか 2 ピクセルのギャップがあり、ページ全体に広がり、ページの上部までつながっています。このギャップはなぜあるのでしょうか？私は chromium ブラウザーを使用しています。このギャップはブラウザーによって異なると思いますが、ブラウザーに関係なく、このギャップを完全に取り除くにはどうすればよいですか?