Gaps when trying to align SVGs with an HTML element

Question

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.

Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Aug 26 '16 at 13:32

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

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.

edited May 23 '17 at 11:51

Community

1
1

answered Aug 26 '16 at 13:34

Caio César

221
1
4
12

OP just needs to make the `svg` and `span` in `.digitDiv` `display: block`. http://jsbin.com/tumujojeni/1/edit?html,css,output – Paul LeBeau Aug 26 '16 at 13:55

score 0 · Answer 2 · answered Aug 26 '16 at 13:39

0

You could try floating the elements within .digitDiv.

span.digit {
    border:1px solid green;
    float:left

}

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

answered Aug 26 '16 at 13:39

sol

22,311
6
42
59

Gaps when trying to align SVGs with an HTML element

2 Answers2