inline-svg-margin-padding-border.html (1473B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: SVG element in HTML should respect margin, padding, and border properties</title> 5 <link rel="author" title="Google" href="http://www.google.com/" /> 6 <link rel="match" href="reference/inline-svg-margin-padding-border-ref.html"> 7 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties"> 8 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties"> 9 <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-properties"> 10 <link rel="help" href="http://www.w3.org/TR/SVG/shapes.html#RectElement"> 11 <link rel="help" href="http://www.w3.org/TR/SVG/painting.html#FillProperty"> 12 <meta name="flags" content="svg" /> 13 <meta name="assert" content="Inline SVG elements should respect CSS margin, padding, and border properties" /> 14 <style type="text/css"> 15 16 * { 17 margin: 0; 18 padding: 0; 19 } 20 21 #container { 22 margin: 10px; 23 padding: 10px; 24 border: 10px solid red; 25 position: absolute; 26 left: 0px; 27 top: 0px; 28 z-index: -1; 29 } 30 31 #container div { 32 width: 60px; 33 height: 60px; 34 background: red; 35 } 36 37 svg { 38 width: 60px; 39 height: 60px; 40 margin: 10px; 41 padding: 10px; 42 border: 10px solid green; 43 } 44 45 </style> 46 </head> 47 <body> 48 <div id="container"><div></div></div> 49 <svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"> 50 <rect x="0" y="0" width="100" height="100" fill="green" /> 51 </svg> 52 </body> 53 </html>