Анимация от большого шрифта к маленькому мешает позиционированию

Question

Я сейчас пытаюсь сделать анимацию с приветственным сообщением. Я хочу, чтобы это было помещено в вертикальную середину моего div. Я преобразую его из большого шрифта в маленький, и кажется, что высота больших шрифтов все еще влияет на позиционирование, или я ошибаюсь?

#barbar{
height:10%;
width: 100%;
background-color:rgba(79, 79, 90, 0.92);
bottom: 0;
position: fixed;
z-index: 3;
}

.hello{
    color: black;
    font-family: "Times New Roman";
    text-align: center;
    animation: ease;
    animation-name: gas;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-duration:2s;
    position: fixed;
    font-size: 100px;
    bottom: 700px;
    margin-left: -20%;
    white-space: nowrap;
}
@keyframes gas{
    from { font-size: 500px; bottom: 700px; margin-left: -20%;}
    to  { font-size: 12px; bottom: 0; margin-left: 15%;}
}

<div id = "barbar">
  <h3 class ='hello'> Welocme User </h3>
</div>

Как вы можете видеть, мой h3 находится внутри div, но все равно каким-то образом не заканчивается там, где я хочу его разместить. to bottom:-x% - это не тот иск, который я ищу.

Answer 1

Добавить "margin-bottom: 0;"к вашему тегу h3.

По умолчанию браузер добавляет поле 1em к элементам h3. Поскольку единица «em» относится к font-size, при добавлении «font-size: 100px» к вашему элементу вы также получаете маржу в 100px.

Я предлагаю использовать сброс CSS. Он очистит все настройки браузера по умолчанию, не позволяя добавлять нежелательные стили на вашей страницеЭто также гарантирует, что ваша страница будет выглядеть одинаково во всех браузерах, так как разные браузеры используют разные значения по умолчанию. Я предлагаю использовать meyerweb reset на всех ваших страницах.