padding-shorthand-003

Padding shorthand - three values application top and left, right and bottom

WeasyPrint

This browser

Flags
image
Assertion
Applying three values to the padding property applies the first value to the top the second value to the left and right and the third value to the bottom.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3     <head>
 4         <title>CSS Test: Padding shorthand - three values application top and left, right and bottom</title>
 5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/">
 6         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-padding">
 7         <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties">
 8         <meta name="flags" content="image">
 9         <meta name="assert" content="Applying three values to the padding property applies the first value to the top the second value to the left and right and the third value to the bottom.">
10         <style type="text/css">
11             #div1
12             {
13                 background: url('support/shorthand-003.png') -5px;
14                 border: 5px green solid;
15                 padding: 5px 20px 50px;
16                 width: 160px;
17             }
18             div div
19             {
20                 background: green;
21                 height: 160px;
22             }
23         </style>
24     </head>
25     <body>
26         <p>Test passes if there is a single solid green box below and there is no red visible on the page.</p>
27         <div id="div1">
28             <div></div>
29         </div>
30     </body>
31 </html>