Sean Brunnock Sean Brunnock - 3 months ago 12
CSS Question

Gaps when trying to align SVGs with an HTML element

I'm trying to align a couple of SVG elements with a SPAN. It looks fine with Atom's HTML preview, but under Chrome and Safari, there a gap between the SVGs and the span that I can't account for.

http://jsbin.com/pawupu/edit?html,css,output



* {
padding:0;
margin:0;
}

div.digitDiv {
font-size:10vw;
font-family: monospace;
display:inline-block;
width:1em;
margin-left:2em;
border:1px solid red;
text-align:center;
}

span.digit {
border:1px solid green;
}

svg {
border:1px solid blue;
width: 5vw;
fill: #000;
}

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>SVG, why you no align?</title>
</head>


<body>

<!-- this works! -->
<div class="digitDiv">
<span class="digit">1</span>
<span class="digit">2</span>
<span class="digit">3</span>
</div>

<!-- this doesn't! -->
<div class="digitDiv">
<svg viewBox="0 0 100 100"><path d="M50,0 100,100 0,100 Z"></path></svg>
<span class="digit">1</span>
<svg viewBox="0 0 100 100"><path d="M0,0 100,0 50,100 Z"></path></svg>
</div>


</body>
</html>





I could manually alter the SVGs' positions via CSS, but I'm wondering if I'm overlooking something else.

Answer

There is a very similar question to yours here and the answer works for you as well.

As said on the linked answer, "SVG is inline and inside of a table cell", so you need to add a display:block statement in the CSS for the svg and fix the horizontal positions manually.

Comments