Почему разная высота span?

Question

HTML:

<button class="menu-btn">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
          </button>

CSS:

.menu-btn {
    display: flex;
    width: 40px;
    height: 20px;
    flex-direction: column;
    justify-content: space-between;
    background-color: inherit;  
}

.menu-btn span{
    height: 2px;
    width: 100%;
    background-color: #000;
}

Почему полоски разной высоты?

Answer 1

У вас установлены небольшие размеры на высоту и ширину кнопки, и, следовательно, такая же маленькая ширина и высота у спанов. Поэтому масштаб страницы нужно подстраивать под такие размеры элементов, иначе получаются изменения в размерах. Например, при 500% масштаба размеры у спанов одинаковы (можете это сами проверить). Так что могу посоветовать либо подстраивать масштаб страницы под ваши размеры, либо менять ширину и высоту страницы под ваши размеры, также можно поменять размеры элементов под масштаб страницы в 100%.

Либо, более лучшее решение, это использовать медиазапросы, если вы хотите сохранить размеры спанов и кнопки.

БЛОГ НА HUSL

Почему разная высота span?

Ответы (1 шт):