Как полностью убрать все отступы у текста и выровнять его по вертикали?

CSS HTML JavaScript

1 ответ

html:

&lt;div class="logo"&gt;       &lt;a href="#" class="logo__link"&gt;         &lt;div class="logo__text"&gt;           TEXT         &lt;/div&gt;       &lt;/a&gt;     &lt;/div&gt;

scss:

logo {   height: 2.5*$logo-text-size;   display: flex;   align-items: center;   &amp;__text {     font-size: $logo-text-size;     color: $primary-color;   }   &amp;__link {     display: block;     &amp;:link {       text-decoration: none;       color: $primary-color;     }     &amp;:visited {       color: black;     }   } }

logo { height: 2.5*$logo-text-size; display: flex; align-items: center; &__text { font-size: $logo-text-size; color: $primary-color; } &__link { display: block; &:link { text-decoration: none; color: $primary-color; } &:visited { color: black; } } }

Уже все способы перепробовал, но почему-то у текста верхний и нижний отступы отличаются.

Дополнительно:

Сделай пример на codepen.

Может сам шрифт такой что у него буквы в строке стоят ниже?

У этих элементов нет отступов по умолчанию, в показанных стилях тоже их нет => поддерживаю комментарий выше - это особенности шрифта

imko, может быть.

Исследую этот вопрос. Спасибо за подсказку!

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ольга Сеть Ответ

Для полного удаления отступов и выравнивания текста по вертикали можно использовать CSS свойство `line-height`. Сначала установим отступы на ноль для всех элементов на странице, а затем установим `line-height` равным высоте контейнера, в котором находится текст.

Пример для HTML:

 
 
 
 
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            height: 100vh; /* задаем высоту контейнера равную высоте окна браузера */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .text {
            line-height: 100vh; /* задаем высоту строки равную высоте контейнера */
        }
 
 
 
    <div class="container">
        <p class="text">Ваш текст здесь</p>
    </div>

* { margin: 0; padding: 0; } .container { height: 100vh; /* задаем высоту контейнера равную высоте окна браузера */ display: flex; justify-content: center; align-items: center; } .text { line-height: 100vh; /* задаем высоту строки равную высоте контейнера */ } <div class="container"> <p class="text">Ваш текст здесь</p> </div>

Пример для CSS:

* {
    margin: 0;
    padding: 0;
}
.container {
    height: 100vh; /* задаем высоту контейнера равную высоте экрана */
    display: flex;
    justify-content: center;
    align-items: center;
}
.text {
    line-height: 100vh; /* задаем высоту строки равную высоте контейнера */
}

* { margin: 0; padding: 0; } .container { height: 100vh; /* задаем высоту контейнера равную высоте экрана */ display: flex; justify-content: center; align-items: center; } .text { line-height: 100vh; /* задаем высоту строки равную высоте контейнера */ }

Таким образом, установив `line-height` равным высоте контейнера, вы сможете полностью избавиться от отступов и выровнять текст по вертикали.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ VPN Как правильно настроить vless для Android TV? 1 ответ Visual Studio Code Как лучше убрать тень у панели слева в VS Code? 1 ответ

Как полностью убрать все отступы у текста и выровнять его по вертикали?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно