Hamburger menu lines are not same height

Issue

I am trying to build a hamburger menu, however, the height of the individual menu lines is inconsistent. The middle line looks to be the actual height while the top and bottom appear smaller.

If I zoom in you can see: .

A zoomed-out version looks like this:

.

.burger span {
  display: block;
  width: 32px;
  height: 2px;
  background-color: red;
}

.burger span:first-of-type {
  margin-bottom: 4px;
}

.burger span:last-of-type {
  margin-top: 4px;
}

<div class="burger">
  <span></span>
  <span></span>
  <span></span>
</div>

If I increase the height of the menu lines to 3px then the top and bottom lines will look larger. If I increase the height to 4px then they will maintain a consistent height. Any help as to why this may be.

Solution

Answer for future visitors (non-code related):

1. If using a Windows machine, check the system display zoom settings. This is most likely the culprit - (this was the issue for this question)
2. Check your browser zoom settings.

Code related:

1. Use different measurement values - px, rem or em to test. May be a subpixel render issue.

Answered By - disinfor