SnareChops SnareChops - 3 months ago 13
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

<whole-rest>
element is located and the black rectangle below it is the
<svg>
that is inside the
<whole-rest>


HTML

<measure>
<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>
</svg>
<whole-rest>
<svg>
<rect height="5" width="10" fill="black"></rect>
</svg>
</whole-rest>
<single-barline>
<svg>
<line stroke="black" stroke-width="1" x1="0" x2="0" y1="0" y2="40"></line>
</svg>
</single-barline>
</measure>


CSS

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
whole-rest
to
display:block
and also messed with
overflow
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
whole-rest
to center the element with absolute positioning.

Pat Pat
Answer

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