I have a few classes that adjust font sizing:

```
.text-tall {
    font-size: 1.5em;
}

.text-small {
    font-size: .8em;
}

```

When I apply the class to a paragraph element

```
<p class="text-tall">Some text goes here.</p>

```

the styling work as expected. When I apply it to a span element

```
<p><span class="text-tall">Some text goes here.</span></p>

```

the adjusted `font-size` is applied to all text below the element on the page, sometimes resulting in progressively larger and larger text.

The obvious solution would be to simply always apply the class to the paragraph element, but my paragraph bottom margin is relatively sized (`margin-bottom: 1.5em`), so doing that increases the margin, too, which is something I don't want to do.

This only seems to be a problem in IE8 and lower. Any suggestions would be appreciated!