Блог

Главная - Вопросы по программированию - Поднимите или опустите пролет, но не заставляйте его занимать дополнительное вертикальное пространство

Поднимите или опустите пролет, но не заставляйте его занимать дополнительное вертикальное пространство

#css

Вопрос:

Я устанавливаю логотип LaTeX с помощью CSS со следующими стилями:

 .TeXE {
    vertical-align: -0.5ex;
    margin-left: -0.1667em;
    margin-right: -0.125em;
}

.LaTeXA {
    font-size: 0.85em;
    vertical-align: 0.15em;
    margin-left: -0.36em;
    margin-right: -0.15em;
}

и тогда я смогу писать, например,

 L<span class="LaTeXA">A</span>T<span class="TeXE">E</span>X

чтобы установить логотип. Проблема, с которой я сталкиваюсь, заключается в том, что я вижу чрезмерный интервал между строками всякий раз, когда печатается логотип. Увеличение межстрочного интервала этого не меняет (по крайней мере, не в Safari, но, вероятно, и не в других браузерах). Итак, вопрос в том, как я могу изменить свой CSS, чтобы скрыть эту дополнительную высоту/глубину?

введите описание изображения здесь

Комментарии:

1. Сообщество здесь хорошее, действительно очень хорошее. Тем не менее, я не думаю, что кто-то может вам помочь без ЧЕТКОГО примера вашей проблемы. Программисты / дизайнеры не являются магами.

2. Вы всегда можете использовать translate вместо полей.

3. …или vertical-align , так сказать, вместо этого. О, вот в чем твоя проблема…

Ответ №1:

vertical-align регулирует пространство, занимаемое текстом, чтобы всегда было место для него на новом месте. Это не подходит для декоративных текстовых эффектов, которые должны занимать то же пространство, что и неокрашенный текст. Вместо этого используйте CSS translate :

 .TeXE {
transform: translate(0, 0.5ex);
display: inline-block;
margin-left: -0.1667em;
margin-right: -0.125em;
}

.LaTeXA {
font-size: 0.85em;
transform: translate(0, -0.15em);
display: inline-block;
margin-left: -0.36em;
margin-right: -0.15em;
} 
 <ol>
<li>Test</li>
<li>L<span class="LaTeXA">A</span>T<span class="TeXE">E</span>X</li>
<li>Test</li>
</ol>

CSS-преобразования (например translate ) перемещают элемент чисто визуально, не влияя на положение любого другого элемента.

Метки: ,