Как мне убрать отступ сверху у ссылки?

Question

[Мистер Помогитепожалуйста]

Откуда у кнопки взялся отступ сверху? Как его убрать?

Макет:



CSS:

.textfaq .text {
     font-size: 40px;
     line-height: 66px;
     color: #fff;
     font-weight: 600;
}

/*контейнер*/

.textfaq {
     max-width: 1250px;
     height: 400px;
     display: flex;
     justify-content: center;
     align-items: center;
}

.textfaq .question a {
     text-decoration: none;
     font-size: 15px;
     color: #fff;
     font-weight: 300;
}

.textfaq .question {
     background: rgba(255, 255, 255, 0.16);
     border-radius: 12px;
}

.text-and-faq {
     max-width: 1200px;
}

HTML:

<div class="text-and-faq">
    <div class="textfaq">
        <span class='text'>Здравствуйте, я робот-юрист, <br> который поможет вам подготовить <br> документы для суда<span class='question'> <a>Как это работает?</a></span>
        </span>
    </div>
    </span>
</div>

Comments

[black1277]

это из-за размера шрифта вот тут

.textfaq .text{
    font-size: 40px;
}

чтобы уменьшить - добавьте размер шрифта вот так

.textfaq .question{
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    font-size: 20px;
}

Answer 1

[Noder SS]

.textfaq .question{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 0px 10px;
}

Answer 2

[Dino Winchester]

Можно переопределить значение свойства line-height для элемента .question или для ссылки которая лежит внутри данного элемента, ну и для нормализации внешнего вида, можно ещё добавить немного флексбокса.

.textfaq .question {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 40px;
}