1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Keep consistent line spacing with sup and sub

Problem

Adding a <sup> or <sub> tag can throw off the line-spacing of a text block.

Solution

Use CSS to override the default browser style.

Detailed description

The selectors

<style type="text/css">
sup,
sub {
	height: 0;
	line-height: 1;
	vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
	
}

sup {
	bottom: 1ex;
}

sub {
	top: .5ex;
}
</style>

Note that before version 7, IE treated vertical-align uniquely among other browsers. Using this approach, I need the underscore hack for IE 6 and below.

The markup

<sup>...</sup>
<sub>...</sub>

Before

After

before.gif
after.gif

Text ID: KEEP_CONSISTENT_LINE_SPACING_WITH_SUP_AND_SUB

---