위첨자(sup)와 아래첨자(sub) 쓸 때 줄간격 조정하기

위첨자(sup)와 아래첨자(sub) 기본 속성은 다음과 같습니다.

sup {
vertical-align: super;
font-size: smaller;
}

sub {
vertical-align: sub;
font-size: smaller;
}

위첨자나 아래첨자가 들어간 문장은 줄간격(행간, line-height)이 조금 커집니다. 다음과 같은 속성을 추가하면 줄간격이 같아집니다.¹

sup {
line-height: 1em;
}

sub {
line-height: 1em;
}

위첨자나 아래첨자 높낮이를 바꾸려면 다음과 같이 하면 됩니다.

sup {
line-height: 1em;
position: relative;
top: -2px;

sub {
line-height: 1em;
position: relative;
top: 2px;
}

이 블로그는 위첨자 색깔을 지정하고, 특별한 수식이 아니면 아래첨자는 문장 기준선에 맞췄습니다.

sup {
color: #cc0000;
line-height: 1em;
}

sub {
vertical-align: baseline;
line-height: 1em;
}

1. 주석 기능(Footnote)을 쓸 때 본문 줄간격 고르게 맞추기