1
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
4 <title>CSS
2.1 Test Suite: padding
</title>
5 <script src=
"../resources/ahem.js"></script>
6 <style type=
"text/css">
8 div
{ font: 10px/1 Ahem
; width: 138px; color: orange
; }
9 img
{ vertical-align: bottom
; }
10 .zero {padding: 0; border: solid
24px yellow
; background-color: red
;}
11 .one {padding: 0.25in; background-color: yellow
;}
12 .two {padding: 24px; background-color: yellow
;}
13 .three {padding: 2.4em; background-color: yellow
;}
14 .four {padding: 17.391%; background-color: yellow
;}
16 <link rel=
"help" href=
"http://www.w3.org/TR/CSS21/box.html#padding-properties" title=
"8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'">
17 <link rel=
"help" href=
"http://www.w3.org/TR/CSS21/syndata.html#length-units" title=
"4.3.2 Lengths">
20 <p>The five diagrams below should be identical.
</p>
23 <img width=
"10" alt=
"" src=
"support/swatch-orange.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-yellow.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-orange.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-yellow.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-orange.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-yellow.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-orange.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-yellow.png" height=
"10"><img width=
"10" alt=
"" src=
"support/swatch-orange.png" height=
"10">