IMG不尊重容器的填充

Question

我已经有了解决方案，即将IMG宽度设置为90%。这对我来说没有意义，这就是为什么我想理解为什么会这样。

Screenshot from Google Chrome 46

容器是一个浮动DIV，两边都有15px填充，宽度设置为100%，并且包含IMG的边距为12px两边的宽度设置为100px。这似乎是在填补祖父母而不是父母。

Answer 1

默认情况下，CSS边距和填充不包含在宽度中。换句话说，如果你设置的宽度为100％，它的宽度将是容器的整个宽度，然后将填充和边距添加到它。

Bootstrap和其他CSS包会更改CSS默认值，以便它可能实现您要执行的操作。那个属性是：

* {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

授予*可能有点过于宽泛，但基本上应用的任何内容都会导致宽度在基于百分比的容器内处理填充和边距时更加灵活。

我建议使用外部容器的填充并从图像中删除边距，而不是对100％的图像应用边距。