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
|
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="general.css" title="Style" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" title="Style" media="print" />
<title>Flying Saucer: CSS Margin, Padding and Background Support</title>
<style type="text/css">
div {
margin: 5px;
border: 1px solid black;
width: 500px; }
div.test3 {
background-color:#ccffcc;
border-width: 20px;
border-style: solid;
border-color: #000000;
padding: 20px;
margin: 20px;
}
div.test4 {
height: 75px;
background-image: url(image.png);
background-repeat: no-repeat;
}
div.test7 {
height: 75px;
background-image: url(image.png);
background-repeat: repeat;
}
div.test8 {
height: 75px;
background-image: url(image.png);
background-repeat: repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p class="link left-link"><a href="demoNav:back">Previous Page</a></p>
<p class="link right-link"><a href="demoNav:forward">Next Page</a></p>
<p id="fslogo">Flying Saucer XML/CSS2 Renderer</p>
<span id="pagebyline">
CSS
<span style="border: 1px solid black; margin: 10px;">Margin</span>,
<span style="border: 1px solid black; padding: 10px;">Paddings</span> and
<span style="background-color: silver">Backgrounds</span>
</span><br />
<p><b>XMargin, padding and background support includes</b>: CSS margin and padding, on any or all four sides of a
box. You can apply both shorthand ("padding: 1px") or to individual sides ("margin-left: 10em").
Backgrounds can be colored and/or include images (as background attachments). Background images can be
repeated horizontally, vertically, or both, and fixed in place.</p>
<br />
<div style="width: 100%; border: 0px; ">
<h3>Margins</h3>
<div class="test10" style="margin: 0px;">margins: 0px</div>
<div class="test11" style="margin: 20px;">margins: 20px</div>
<div class="test12" style="margin: 10px 20px 30px 40px;">margins: 10px 20px 30px 40px</div>
<h3>Padding</h3>
<div class="test20" style="padding: 0px;">padding: 0px</div>
<div class="test21" style="padding: 20px;">padding: 20px</div>
<div class="test22" style="padding: 10px 20px 30px 40px;">padding: 10px 20px 30px 40px</div>
<h3>Backgrounds</h3>
<div class="test3" style="width: 75%">
<pre>
{
background-color:#ccffcc;
border-width: 20px;
border-style: solid;
border-color: #000000;
padding: 20px;
margin: 20px;
}
</pre>
</div>
<div class="test4">div with image back and no repeat</div>
<div class="test7">div with image back and repeat both</div>
<div class="test8">div with fixed image background and repeat both</div>
</div>
</body>
</html>
|
