В прежние времена теги sup и sub использовались для представления чего-либо в виде надстрочного (текст над строкой) или подстрочного (текст под строкой), но в наши дни мы оставляем представление на усмотрение CSS.
Вы могли бы просто использовать свойство CSS vertical-align со значением super или sub или даже с длиной, чтобы получить элементарный надстрочный и подстрочный индексы, но проблема заключается в том, что в абзаце эти строки с надстрочным или подстрочным текстом изменят высоту этой строки, что приведёт к несоответствующему интервалу между абзацами.
Относительно расположенные нижний и надстрочный индексы.
Способ обойти эту проблему ─ зацепиться за те части, которые мы хотим сделать надстрочными или подстрочными, и аккуратно подтолкнуть их вверх или вниз (а также сделать их немного меньше, как это обычно принято).
Шаг 1: HTML-код
Давайте начнём с фиксации соответствующего текста:
<p>H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphuric acid. But how is this gold Au<span class="charge">2+</span>?</p>
Шаг 2: выравнивание по вертикали
Теперь, для достижения желаемого эффекта, мы можем использовать следующий CSS:
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
Посмотрите на это в действии.
В то время как vertical-align вы будете возиться с высотой строки (попробуйте изменить line-height значение абзаца на 1 и заменить bottom: 0.5em на vertical-align: 0.5em), простое нажатие требуемых элементов немного вверх или вниз с помощью top или bottom значительно упрощает работу.
Страницы в тему:
- Текст: время, метка и презентация (Внушительный урок HTML)
- HTML-тег: span
- Свойство CSS: vertical-align
- Свойство CSS: font-size
- Свойство CSS: position
Примеры CSS:
- Надстрочный и подстрочный индекс: приведённый выше пример кода в действии
