I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other.
However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have the same size?
div{
margin:20px;
}
.line{
display: block;
height: 2px;
width: 18px;
margin-bottom: 6px;
background-color: red;
}<div>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>Result: