css - 了解内联块 div 及其“边距”css 属性

Question

我试图理解这段代码，以便裁剪和居中图像。

我想我已经理解了大部分内容，但我仍然不明白为什么我需要这个：

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

我认为margin: -100% -100%是为了使图像垂直和水平居中，但为什么它放在容器的左侧（因此：为什么我需要那个 padding-left：100%）？

Answer 1

我想我知道它是如何工作的。在这里你可以找到一个我试图从头开始为你写的例子。已image被替换为div，但由于它们都显示为inline-block，所以最后一个方便改变高度和玩弄它。

让我说，如果您不想使用 jquery 来大量操作您的所有 DOM，这将非常有用！在一堆 CSS 规则集中裁剪和居中。