csstdg5figs/15-text-properties/vertical-align-taller-line.html at main · meyerweb/csstdg5figs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Vertical alignments can cause lines to get taller</title>
<link rel="stylesheet" type="text/css" href="ch06.css">
<style type="text/css">
body {width: 500px;}
p {font-size: 16px; line-height: 16px;}
sub, sup {font-size: 1em;}
strong {vertical-align: 100%;}
</style>
</head>
<body>

<p>This paragraph contains a lot of text to be displayed, and a part of that text is some <strong>nicely bold text</strong> which is raised up 100%.  This makes it look as though the bold text is part of its own line of text, when in fact the line in which is sits is simply much taller than usual.</p>

</body>
</html>