| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <title>CSS Test: Margin with a value of 'auto'</title> |
| <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> |
| <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-13 --> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin" /> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" /> |
| <link rel="match" href="margin-005-ref.xht" /> |
| |
| <meta name="flags" content="" /> |
| <meta name="assert" content="The 'margin' property with a value of 'auto' correctly sizes the margin. In normal flow, 'margin-top: auto' and 'margin-bottom: auto' for block-level, non-replaced elements are resolved as 0. In normal flow, 'margin-left: auto' and 'margin-right: auto' for block-level, non-replaced elements are resolved according to the constraint equation for the width of containing block: 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block" /> |
| <style type="text/css"> |
| #wrapper |
| { |
| position: relative; |
| } |
| #div1, #div2 |
| { |
| border: 10px solid green; |
| } |
| #div1, #reference |
| { |
| left: 0; |
| position: absolute; |
| top: 0; |
| } |
| |
| /* |
| In this test, #div1, which is absolutely positioned, is |
| #div2's containing block. In which case, the width of #div1 is |
| shrink-to-fit to the width of #div2 plus its borders. |
| http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width |
| */ |
| |
| #div2 |
| { |
| height: 1in; |
| margin: auto; |
| width: 3in; |
| } |
| #reference |
| { |
| border: 20px solid red; |
| height: 96px; |
| width: 288px; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Test passes if there is <strong>no red</strong>.</p> |
| <div id="wrapper"> |
| <div id="reference"></div> |
| <div id="div1"> |
| <div id="div2"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
