<hr> tags showing different behaviour-CodePudding

When I'm using <hr> tags to create horizontal rows then the behavior is not uniform i.e. all the <hr>s (in my case) are displaying alternate background color.

Also, I've tested in Chrome and opera and the zoom level was 100% at the time of testing.

For reference, below is the image:-

hr{
    border-style: none;
    width: 10%;
    height: 2px;
    background-color: rgba(0, 0, 0, 0.253) ;
}

<hr>
<br>

<hr>
<br>

<hr>
<br>

<hr>
<br>

<hr>

CodePudding user response：

Maybe Your HTML hr tags are inheriting styles from somewhere else from your style sheet. That's the reason maybe they are Loading like this. Try to inspect those hr from chromedev tools.

CodePudding user response：

Try use relative units like EM instead of PX, it magically works.

hr{
    border-style: none;
    width: 10%;
    height: 0.1rem;
    background-color: rgba(0, 0, 0, 0.253) ;
}

<hr>
<br>

<hr>
<br>

<hr>
<br>

<hr>
<br>

<hr>

You can use https://www.w3schools.com/cssref/css_pxtoemconversion.asp to convert PX to EM. Using relative units make your site more user-friendly to most of the displays.