padding-shorthand-002

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

WeasyPrint

This browser

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

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 - two values application top, bottom and left, right</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 two values to the padding property applies the first value to the top and bottom and the second to the left and right.">
10         <style type="text/css">
11             #div1
12             {
13                 background: url('support/shorthand-002.png') -5px;
14                 border: 5px green solid;
15                 padding: 10px 50px;
16                 width: 100px;
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>