title: hr element vs 1px high div vs 1px border
body: <p>I have an app which has sections, and I need a 1px line between them.  It seems I have a choice:</p>
  
  <ol>
  <li><p>An hr element.</p></li>
  <li><p>A div with a 1px border.</p></li>
  <li><p>A div which is one pixel high, and has a background color.</p></li>
  </ol>
  
  <p>See <a href="https://codepen.io/gregoryagu/pen/zoQEyz" rel="nofollow noreferrer">example</a></p>
  
  <pre><code>.hr1{
    border-bottom: 1px solid;
  }
  
  .hr2{
    height:1px;
    background-color:black;
  }
  </code></pre>
  
  <p>Is there any benefit to one particular way? </p>
  
  <p>It seems to me the hr element is not a good idea, as the styling could get changed too easily.</p>