csstdg5figs/07-padding-borders-outlines-and-margins/padding_effect-of-padding-bordered-blocks.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
			"http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>The effect of padding on bordered block-level elements</title>
<link rel="stylesheet" type="text/css" href="c/pbom-baseline.css">
<style type="text/css">
body {display: flex; align-items: start; gap: 2em; padding: 0 1em;}
p {border: 2px solid gray;}
p:first-child {padding: 1em;}
</style>
</head>
<body>

<p>This paragraph has a border and some padding.  The padding keeps the border away from the text content, which is generally more visually appealing.  The converse is usually true for replaced content like images.</p>
<p>This paragraph has a border and no padding.  The lack of padding means the border is very close to the text content, which is generally not visually appealing.  The converse is usually true for replaced content like images.</p>

</body>
</html>