understanding inline-block divs and its "margin" css property

Question

I'm trying to understand this code in order to both crop and center an image.

I think I've understood most of it, but I'm still not figuring out why I need this:

.img-crop img{
    /* removes(sorta) image from the flow */
    padding-left: 100%;
    margin: -100% -100%;
}

I think margin: -100% -100% is for centering the image both vertically and horizontally, but why is it placed on the left of the container (and therefore: why do I need that padding-left: 100%)?

Answer 1

I think I figured out how it works. here you can find an example I tried to write for you from scratch. The image has been replaced by a div, but since they are both displayed as inline-block, the last one is convenient for changing heights and play with it.

Let me say it's quite useful if you don't want to use jquery to heavily manipulate all your DOM! Crop and centering just in a bunch of css rulesets.