Почему съезжает кнопка?

Question

[kokapuk]

<header id="winborder">
      <nav style="float: right; height: 27px;">
        <button id="minimizeButton" class="navButton">–</button>
        <button id="maximizeButton" class="navButton">□</button>
        <button id="closeButton" class="navButton">×</button>
      </nav>
    </header>

#winborder {
    background-color: darkslateblue;
    height: 27px;
    -webkit-app-region: drag;
}

.navButton {
    display: inline;
    -webkit-app-region: no-drag;
    height: 100%;
    width: 35px;
    margin-left: -4px;
    font-size: 20px;
    background-color: transparent;
    color: white;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
    transition: 0.2s;
    box-sizing:border-box;
}

#closeButton {
    font-size: 30px;
}

Answer 1

[Ankhena]

Потому что у кнопок разный font-size, а выравнивание по базовой линии шрифта.

Читать про line-height
https://web-standards.ru/articles/vertical-align/
https://css-live.ru/css/metriki-shrifta-line-heigh...

Читать про блочную модель https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...
Чтобы не пытаться задавать размеры инлайнам.