SnareChops SnareChops - 1 year ago 79
CSS Question

Phantom space between parent element and svg

I have a project I'm working on and bumped into a strange misalignment of the parent element and the SVG contained inside.

enter image description here

The light blue spot is where chrome says the

element is located and the black rectangle below it is the
that is inside the


<svg style="width: 100px;">
<line stroke="black" stroke-width="2" x1="0" y1="10" y2="10" x2="100"></line>
<line stroke="black" stroke-width="2" x1="0" y1="20" y2="20" x2="100"></line>
<line stroke="black" stroke-width="2" x1="0" y1="30" y2="30" x2="100"></line>
<line stroke="black" stroke-width="2" x1="0" y1="40" y2="40" x2="100"></line>
<line stroke="black" stroke-width="2" x1="0" y1="50" y2="50" x2="100"></line>
<rect height="5" width="10" fill="black"></rect>
<line stroke="black" stroke-width="1" x1="0" x2="0" y1="0" y2="40"></line>


measure {
height: 60px;
float: left;
display: inline-block;
position: relative;

measure > svg {
height: 60px;

whole-rest {
height: 5px;
width: 10px;
position: absolute;
top: 22px;
left: 50%;
margin-left: -5px;

whole-rest > svg {
height: 5px;
width: 10px;

Also if it matters I am using the Eric Meyers 2.0 CSS reset, browser is Chrome.

I have tried setting the
and also messed with
since sometimes those can help with floating / maligned items.

No elements have any margin or padding (with the exception of the
margin-left: -5px
on the
to center the element with absolute positioning.

Pat Pat
Answer Source

Add position: absolute; to .whole-rest > svg { ... }

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download