title: Creating vertical line which vertically extends over entire webpage
body: <p>I have text and want to give the text a left and right border which vertically extends over the entire webpage. This is my html</p>
  
  <pre><code>&lt;div id="vLine"&gt;
      &lt;h1&gt;text&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is my css</p>
  
  <pre><code>#vLine {
      height: 100%;
      width: 50px;
      border-left: 3px solid black;
      border-right: 3px solid black;
  </code></pre>
  
  <p>Now, even though I set my height to 100%, it still like a tiny 2px gap between the top of the line and the top of the webpage, it stretch over the entire page and connect till the top of the page. Why is this gap there? I am using the chromium browser, and i'm guessing this gap will vary depending on browsers but how do I get rid of this gap completely regardless of the browser?</p>