html - Negative margin limit with images -

see fiddle: http://jsfiddle.net/5besz/

i've discovered strange haven't seen documented anywhere else... wondering if had solution.

you'll notice negative margin hits limit @ around -212% image elements. there reason this? can think of work around?

why need (what i've tried):

i'm making fluid layout , want display rating system. have sprite sheet of stars (similar 1 in fiddle) want reuse @ various sizes.

because size changes can't use background image. decided use image inside container variable width , overflow:hidden. sprite sheet adjusts width of container , container's viewable content determined padding-top:20%. can fluid width (since every star box, total height 20% width).

then try , position star image inside container margin-top. tried using position:relative , top:-x%, because container technically has no height causing issue on mobile phones (-100% of 0 0, etc).

so assumed negative margin work, discovered strange issue!

note: because affects last row can make work in situation using padding-bottom instead of top (thereby bumping every star row 1), isn't adequate solution me because ignores problem. if wanted quarter stars?

i've updated fiddle. img tags "inline" elements default, impacts way margin calculated relative containing element. forcing image element rendered block (display: block), you're able achieve results expecting. div element block default.

as side note, you'll want avoid using inline styles (a different sort of "inline"!) wherever possible. typically styles included in stylesheet instead of in style attribute directly on element. included fix (display: block) in attribute match code style of html.