html - Svg Tag Horizontal Gap -


i have 2 elements display side side.

http://jsfiddle.net/m7y8h7wf/

<div style="background-color:#000000;font-size:0;padding:10px;">  <svg version="1.1" width="50" height="1">                              <g stroke="white" >                                  <line x1="50.5" y1=".5" x2=".5" y2=".5" stroke-width="1" shape-rendering="crispedges"  />                              </g>                          </svg>                          <svg version="1.1" width="50" height="1">                              <g stroke="white" >                                  <line x1="0.5" y1=".5" x2="50.5" y2=".5" stroke-width="1" shape-rendering="crispedges"  />                              </g>                          </svg>  </div>

it looks pretty in firefox, in chrome there's noticeable horizontal gap between 2 elements.

i've tried removing padding/margins can think of doesn't want go away.

any ideas?

if i'm understanding problem, wouldn't starting second element @ x=0 rather x=0.5 tighten things up?

<div style="background-color:#000000;font-size:0;padding:10px;">    <svg version="1.1" width="50" height="1">      <g stroke="white" >        <line x1="50.5" y1=".5" x2=".5" y2=".5" stroke-width="1" shape-rendering="crispedges"  />      </g>    </svg>    <svg version="1.1" width="50" height="1">      <g stroke="white" >        <line x1="0" y1=".5" x2="50.5" y2=".5" stroke-width="1" shape-rendering="crispedges"  />      </g>    </svg>  </div>


Comments

Popular posts from this blog

c++ - QTextObjectInterface with Qml TextEdit (QQuickTextEdit) -

javascript - angular ng-required radio button not toggling required off in firefox 33, OK in chrome -

xcode - Swift Playground - Files are not readable -