csstdg5figs/06-basic-visual-formatting/padding-borders-unaltered-line-height.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
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>Padding and borders do not alter line-height</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="c/base.css">
<style type="text/css">
body {width: 50em;}
.arena {display: flex; justify-content: space-between;}
p {line-height: 1.1; width: 47%;}
p:nth-of-type(2) span {padding: 4px;}
span {border: 1px solid gray;}
</style>
</head>
<body>

<main class="arena">

<p>
<span>The text in this paragraph has been wrapped with a <code>span</code> element, to which a border and no padding has been applied.  This helps to visualize the limits of each line’s box.  Note that in certain cases the borders can actually pass each other; this is because the border is drawn around the outside of the element’s content, and so sticks one pixel beyond the actual limit of each line’s content area (which would technically fall in the space between pixels).</span>
</p>
<p>
<span>The text in this paragraph has been wrapped with a <code>span</code> element, to which a border and <code>4px</code> of padding has been applied.  This helps to visualize the limits of each line’s box.  Note that in certain cases the borders can actually pass each other; this is because the border is drawn around the outside of the element’s content, and so sticks one pixel beyond the actual limit of each line’s content area (which would technically fall in the space between pixels).</span>
</p>

</main>

</body>
</html>