Spurious margin on svg element

StackOverflow https://stackoverflow.com/questions/22337292

  •  13-06-2023
  •  | 
  •  

题

I have a very simple document (see also JSFiddle):

<style>
html, body, svg, div {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>
<body>
<svg id="foo"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   style="width: 768px; height: 1004px;">
</svg>
</body>

For some reason, the svg element gets a 3px or 4px bottom margin (that is, the body element gets a height of 1007px, 1008px or even 1009px; the svg margin itself is 0 when inspected using the browser debug tools.)

If I replace the svg with a div, the spurious margin disappears. The behavior is consistent across Opera 12, Chrome 33, Firefox 26 and Internet Explorer 11, so I'm confident that the behavior is by design and standards compliant, I just don't get it.

有帮助吗？

解决方案

This is a common issue with inline elements. To solve this, simply add vertical-align:top.

UPDATED EXAMPLE HERE

#foo {
    background: #fff;
    vertical-align:top;
}

It's worth noting that the default value for the vertical-align property is baseline. This explains the default behavior. Values such as top, middle, and bottom will correct the alignment.

Alternatively, you could make the element block level. (example)

其他提示

I had a related problem where I had a div containing an SVG:

<div id=contents>
    <svg exported from illustrator>
</div>

and there were giant margins above and below the SVG in the DIV, even with vertical-align:top in the DIV and display:block in the SVG.

I had set "width:100%" for the SVG's to make them fill the page.

The solution was to set "height:100%" for the SVG's. They were already displaying at the correct height, but adding this got rid of the weird margins.

I would love to know how and why this worked.

My document had a single svg element that resized with the window. I used CSS overflow:hidden to prevent scroll bars appearing. IE:

    body {
        overflow: hidden;
    }
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top