-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
executable file
·121 lines (114 loc) · 8.41 KB
/
index.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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Padding, Borders, Outlines, and Margins (Chapter 7)</title>
<link type="text/css" href="../styles/indices.css" rel="stylesheet">
<style type="text/css">
body {--chno: "7";}
</style>
</head>
<body>
<header>
<h1>Padding, Borders, Outlines, and Margins</h1>
<h2>Chapter 7</h2>
</header>
<main>
<h3>Figures</h3>
<ol>
<li>The CSS box model</li>
<li><a href="padding_adding-padding-to-elements.html">Adding padding to elements</a></li>
<li><a href="padding_effect-of-padding-bordered-blocks.html">The effect of padding on bordered block-level elements</a></li>
<li><a href="padding_mixed-value.html">Mixed-value padding</a></li>
<li>Value-replication pattern</li>
<li><a href="padding_using-instead-of-margins.html">Using padding instead of margins</a></li>
<li><a href="padding_more-than-one-single-side.html">More than one single-side padding</a></li>
<li><a href="logical-padding.html">Logical padding</a></li>
<li><a href="padding_percentages-and-widths-of-parents.html">Padding, percentages, and the widths of parent elements</a></li>
<li><a href="padding_mixed-padding.html">Mixed padding</a></li>
<li><a href="padding_inline-nonreplaced-element.html">Top padding on an inline nonreplaced element</a></li>
<li><a href="padding_inline-nonreplaced-element-25-left.html">An inline nonreplaced element with left padding</a></li>
<li><a href="padding_inline-nonreplaced-element-25-sides.html">An inline nonreplaced element with 25-pixel side padding</a></li>
<li><a href="padding_inline-nonreplaced-element-25-sides-linebreak.html">An inline nonreplaced element with 25-pixel side padding displayed across two lines of text</a></li>
<li><a href="padding_replaced-element.html">Padding replaced elements</a></li>
<li><a href="padding_replaced-inline-element.html">Padding replaced elements</a></li>
<li><a href="borders_border-styles.html">Border styles</a></li>
<li><a href="borders_inset-two-ways.html">Two valid ways of rendering inset</a></li>
<li><a href="borders_outset-image.html">Applying an outset border to a hyperlinked image</a></li>
<li><a href="borders_two-outset.html">Two outset borders</a></li>
<li><a href="borders_equivalent-style-rules.html">Equivalent style rules</a></li>
<li><a href="borders_removing-left-border.html">Removing the left border</a></li>
<li><a href="logical-border-styles.html">Logical border styles</a></li>
<li><a href="borders_width-keywords.html">The relation of border-width keywords to each other</a></li>
<li><a href="borders_uneven-widths.html">Value replication and uneven border widths</a></li>
<li><a href="borders_many-aspects.html">Borders have many aspects</a></li>
<li><a href="borders_colors-based-on-foreground-and-property.html">Border colors based on the element’s foreground and the value of the border-color property</a></li>
<li><a href="borders_using-transparent.html">Using transparent borders</a></li>
<li><a href="borders_setting-bottom-with-shorthand.html">Setting a bottom border with a shorthand property</a></li>
<li><a href="borders_very-complex-borders.html">Very complex borders</a></li>
<li><a href="borders_dashing-across-top.html">Dashing across the top of an element</a></li>
<li><a href="borders_really-short-declaration.html">A really short border declaration</a></li>
<li><a href="borders_using-the-cascade.html">Using the cascade to your advantage</a></li>
<li><a href="borders_inline-nonreplaced-element.html">Borders on inline nonreplaced elements</a></li>
<li><a href="borders_inline-nonreplaced-element-left-border.html">Inline nonreplaced elements with inline-start borders</a></li>
<li><a href="borders_inline-replaced-element.html">Borders on inline replaced elements</a></li>
<li><a href="borders_border-radius-simple.html">How border radii are calculated</a></li>
<li><a href="borders_border-radius-simple-percentage.html">How percentage border radii are calculated</a></li>
<li><a href="borders_border-radius-various.html">A variety of rounded corners</a></li>
<li><a href="borders_border-radius-still-boxes.html">Elements with rounded corners are still boxes</a></li>
<li><a href="borders_border-radius-slash-simple.html">Elliptical corner rounding</a></li>
<li><a href="borders_border-radius-slash-various.html">Different elliptical rounding calculations</a></li>
<li><a href="borders_border-radius-blend-details.html">Rounded corners up close</a></li>
<li><a href="borders_links-like-balloons.html">Links shaped like word balloons</a></li>
<li><a href="logical-border-radius.html">Rounding the block-start, inline-end corner</a></li>
<li><a href="borders_image-defining-source.html">Defining a border image’s source</a></li>
<li><a href="borders_image-various-slicing-patterns.html">Various slicing patterns</a></li>
<li><a href="borders_image-all-around.html">An all-around image border</a></li>
<li><a href="borders_image-various-patterns-prevent-sides.html">Various patterns that prevent side slices</a></li>
<li><a href="borders_image-number-slicing.html">Number slicing</a></li>
<li><a href="borders_image-slices-lines-at-25.html">Slice-lines at 25 pixels</a></li>
<li><a href="borders_image-fill-slice.html">Using the fill slice</a></li>
<li><a href="borders_image-uneven-widths.html">Uneven border image widths</a></li>
<li><a href="borders_image-slice-lines-at-1em.html">Placing slice-lines for the border image’s width</a></li>
<li><a href="borders_image-filling-border-areas.html">A border with and without its border image</a></li>
<li><a href="borders_image-slice-lines-at-33pct.html">Placement of percentage slice-lines</a></li>
<li><a href="borders_image-various-numeric-widths.html">Various numeric border image widths</a></li>
<li><a href="borders_image-border-overhang.html">Creating an image border overhang</a></li>
<li><a href="borders_image-repeat.html">Various image-repeat patterns</a></li>
<li><a href="borders_image-various-space.html">A variety of space repetitions</a></li>
<li><a href="borders_image-examples-plaque.html">A simple plaque effect and its older-browser fallback</a></li>
<li><a href="borders_image-examples-oceanic.html">A wavy border</a></li>
<li><a href="borders_image-examples-oceanic-bg.html">The background area, visible through the image border</a></li>
<li><a href="outlines_outline-styles.html">Various outline styles</a></li>
<li><a href="outlines_width-keywords.html">Various outline widths</a></li>
<li><a href="outlines_various-outlines.html">Various outlines</a></li>
<li><a href="outlines_outline-over-margin.html">Outline over margin</a></li>
<li><a href="outlines_overlapping.html">Overlapping outlines</a></li>
<li><a href="outlines_discontinuous-and-non-rectangular.html">Discontinuous and nonrectangular outlines</a></li>
<li><a href="margins_paragraphs-with-and-without.html">Paragraphs with, and without, margins</a></li>
<li><a href="margins_setting-a-margin-for-h1.html">Setting a margin for h1 elements</a></li>
<li><a href="margins_mixed-units.html">Mixed-value margins</a></li>
<li><a href="margins_percentages-and-widths-of-parents.html">Parent widths and percentages</a></li>
<li><a href="margins_collapsing.html">Collapsing margins</a></li>
<li><a href="margins_collapsing-within.html">Margins collapsing with parents</a></li>
<li><a href="margins_collapsing-within-revealed.html">Margins collapsing with parents, revealed</a></li>
<li><a href="margins_negative-in-action.html">Negative margins in action</a></li>
<li><a href="margins_punching-out.html">Punching out of a parent</a></li>
<li><a href="margins_inline-nonreplaced-element-25-left.html">An inline nonreplaced element with an inline-start margin</a></li>
<li><a href="margins_inline-nonreplaced-element-25-sides.html">An inline nonreplaced element with 25-pixel side margins</a></li>
<li><a href="margins_inline-nonreplaced-element-25-sides-linebreak.html">An inline nonreplaced element with 25-pixel side margin displayed across two lines of text</a></li>
<li><a href="margins_inline-nonreplaced-element-25-negative.html">An inline nonreplaced element with a negative margin</a></li>
<li><a href="margins_inline-replaced-elements.html">Inline replaced elements with differing margin values</a></li>
</ol>
</main>
<nav>
<a href="../06-basic-visual-formatting/index.html">Chapter 6: Basic Visual Formatting</a>
<a href="../index.html"><acronym title="Table of Contents">TOC</acronym></a>
<a href="../08-backgrounds/index.html">Chapter 8: Backgrounds</a>
</nav>
<footer>
<cite>Padding, Borders, Outlines, and Margins</cite>
<cite><a>CSS: The Definitive Guide, 5th Edition</a></cite>
</footer>
</body>
</html>