Sean Brunnock Sean Brunnock - 6 months ago 34
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.,css,output

* {

div.digitDiv {
font-family: monospace;
border:1px solid red;

span.digit {
border:1px solid green;

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

<!DOCTYPE html>

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


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

<!-- 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>


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


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.