理解内联块div及其“margin”css属性

Question

我正在尝试理解这个code，以便裁剪和居中图像。

我想我已经理解了大部分内容，但我仍然没有弄清楚为什么需要这个：

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

我认为margin: -100% -100%用于垂直和水平居中图像，但为什么它放在容器的左侧（因此：为什么我需要填充左边：100％）？

Answer 1

我想我弄清楚它是如何运作的。 here你可以找到我试图从头开始为你写的一个例子。 image已替换为div，但由于它们都显示为inline-block，因此最后一个便于更改高度并使用它。

如果你不想使用jquery来大量操作你的所有DOM，那么让我说它非常有用！仅在一堆css规则集中裁剪和居中。