如何让CSS border位于图片本身而非padding外侧？

首先看你当前的代码：

<img src="https://via.placeholder.com/800" style="margin: auto;border: 4px solid #93C69F;width: 100%;padding: 50px;" />

问题出在默认的CSS盒模型（content-box）：width仅指图片内容的宽度，padding会加在图片外侧，border又加在padding外侧，所以border和图片之间隔着padding，无法紧贴。

下面是两种可行的解决方法：

方法1：将padding移到父容器（推荐） #

给图片套一个外层容器，把padding设置在容器上，图片只保留border、宽度和margin。这样border会直接紧贴图片，padding则在border外侧：

<div style="padding: 50px;">
  <img src="https://via.placeholder.com/800" style="margin: auto;border: 4px solid #93C69F;width: 100%;" />
</div>

这种方法不会压缩图片，图片能完整占满容器宽度（减去border的宽度）。

方法2：使用box-sizing: border-box调整盒模型 #

如果不想额外添加容器，可以给图片设置box-sizing: border-box，让width属性包含padding和border的宽度。这样border会紧贴图片内容，但图片会被压缩以适应width:100%的总尺寸（总宽度=图片内容+padding+border）：

<img src="https://via.placeholder.com/800" style="margin: auto;border: 4px solid #93C69F;width: 100%;padding: 50px;box-sizing: border-box;" />

内容的提问来源于stack exchange，提问作者Areeb