css - 了解内联 block div 及其 "margin"css 属性

Question

我正在尝试理解这个 code为了裁剪和居中图像。

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

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

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

Answer 1

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

如果您不想使用 jquery 大量操作所有 DOM，我可以说它非常有用!仅在一堆 css 规则集中裁剪和居中。