3 div with the same css, but they're not the same height

Question

my point is to make something like left window, but it ended up as what you can see in right photo. 3 div with the same css code, but they have different height.

span div {
    background: #262626;
    height: 1.5px;
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Answer 1

You are using fractional values in px unit for height. change it to integer value. It will work.

span div {
  background: #262626;
  height: 2px;
  width: 200px;
  margin-top: 6px;
  border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

UPDATE

AFAIK fractional pixels or sub-pixels are rounded or considered differently in different browsers. In chrome, it should display these divs with equal height. but it may vary according to screen size.

Run the below snippet and try to zoom-in the screen, you will see at some point these divs are having equal height. But at another zoom levels divs will display with uneqaul heights.

More info: Sub-Pixel Problems in CSS

span div {
  background: #262626;
  height: 1.5px;
  width: 100px;
  margin-top: 6px;
  border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Answer 2

Height doesn't work in decimals. Some browser covert it to round off but all browsers have a different strategy when rounding sub-pixel percentages. So use it integer. Also detailed explaination are here

span div {
    background: #262626;
    height: 3px;
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}

<span>
    <div></div>
    <div></div>
    <div></div>
</span>

Answer 3

It happens because 1.5px is very small to be shown on the screen. Make it 2px.

span div {
    background: #262626;
    height: 2px; /* changed to 2px */
    width: 20px;
    margin-top: 6px;
    border-radius: 15%;
}