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 >
<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.
CodePudding user response:
Answer for future visitors (non-code related):
- If using a Windows machine, check the system display zoom settings. This is most likely the culprit - (this was the issue for this question)
- Check your browser zoom settings.
Code related:
- Use different measurement values -
px
,rem
orem
to test. May be a subpixel render issue.