CODEWITHSUNDEEP
htmlsvgmargin
Søren Løvborg
Søren Løvborg

Reputation: 8751

Spurious margin on svg element

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.

Upvotes: 31

Views: 49152

Answers (3)

Andrew Swift
Andrew Swift

Reputation: 2237

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.

Upvotes: 6

Peter L
Peter L

Reputation: 3343

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;
    }

Upvotes: -2

Josh Crozier
Josh Crozier

Reputation: 240858

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)

Upvotes: 53

Related Questions