-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathspacing.html
85 lines (63 loc) · 2.7 KB
/
spacing.html
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'/>
<title>Spacing</title>
<link rel='stylesheet' href='typo.css'/>
</head>
<body>
<header>
<nav>
<ul>
<li><a href='web-fonts.html'>Web Fonts</a></li>
<li><a href='history.html'>History</a></li>
<li><a href='indents.html'>Indents</a></li>
<li><a href='alignment.html'>Alignment</a></li>
<li class='selected'>Spacing</li>
<li><a href='line-length.html'>Line Length</a></li>
</ul>
</nav>
<div class='hero'>
<h1>Spacing</h1>
</div>
</header>
<div class='page'>
<section class='section section--blue'>
<h2>Give Your Elements Enough Room to Breath</h2>
<p>One of the easiest ways to make your web pages look more professional is
to add bigger margins or padding between everything.</p>
<p>By everything, we mean the space between headings, paragraphs, images,
form controls, the vertical space between lines, the horizontal space between
the edge of the page, and pretty much every other margin or padding you can
think of.</p>
</section>
<section class='section section--blue'>
<h2>Consistent Spacing</h2>
<p>Using a <em>consistent</em> margin between headings, paragraphs, images,
and other elements gives a vertical rhythm to the page. See how this button
doesn’t seem to break the flow of the page?</p>
<a class='button' href='#'>Learn More About Typography</a>
<p>Consistent spacing makes your web page feel more like a cohesive whole,
rather than a bunch of unrelated graphical elements.</p>
</section>
<section class='section section--red messy'>
<h2>Without Enough Space, Things Feel Messy</h2>
<p>One of the easiest ways to make your web pages look less professional is
to reduce margins or padding between everything.</p>
<p>By everything, we mean the space between headings, paragraphs, images,
form controls, the vertical space between lines, the horizontal space between
the edge of the page, and pretty much every other margin or padding you can
think of.</p>
</section>
<section class='section section--red messy'>
<h2>Inconsistent Spacing</h2>
<p>Using an inconsistent margin between headings, paragraphs, images, and
other elements destroys the vertical rhythm of a page. See how this button
seems to break the flow of the page?</p>
<a class='button' href='#'>Learn More About Typography</a>
<p>The difference between the top and bottom margin makes it feel like it
doesn’t fit in, and your web page is no longer a cohesive whole.</p>
</section>
</div>
</body>
</html>