使图像填充不影响阴影

Question

所以，我有一个简单的css，但大问题…

.separator a img {
  width: 100%;
  height: auto;
  padding: 12px;
}

结果是:this

正如你在图像上看到的，阴影显示在图像的填充上，但我希望它显示在图像上。

我想这样做，但也要保持padding

任何想法?

Answer 1

您正在寻找margin CSS属性。Padding在border-box的内侧，margin在外边。

因为阴影是(我假设)通过box-shadow应用的，所以边缘将在它的外面，阴影将直接显示在图像的旁边。

尝试将padding: 12px改为margin: 12px

Answer 2

尝试使用margin代替padding。想象padding在框内，margin是框和页面上其他东西之间的空间。