html - 不同高度的汉堡菜单行

Question

我有一个奇怪的问题，汉堡包菜单的行高彼此不同。中间的与顶部和底部不同，尽管它们具有相同的属性。

 .hamburger{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    border: 1px solid black;    
    display: flex;
    justify-content: center;
    align-items: center;
    }

    /* Mid hamburger line*/
    .hamburger > div{
        position: relative;
        width: 100%;
        height: 2px;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Top bot line*/
    
    .hamburger > div:before,
    .hamburger > div:after{
        content: '';
        position: absolute;
        z-index: 1;
        top: -10px;
        width: 100%;
        height: 2px;
        background: inherit;
    }
    
    /* moves line down */
    
    .hamburger > div::after{
        top: 10px;
    }

<div class="hamburger"><div></div></div>

Hamburger Image

Answer 1

请使用正确的方法制作汉堡包。CSS:-

.hamburger {border: 1px solid #000; display: inline-block;padding:6px;}
.hamburger div {height:2px; background:#000; width:24px; margin: 3px;}

HTML:-

    <button class="hamburger">
  <div></div>
  <div></div>
  <div></div>
</button>