如何为圆形容器内的背景图设置有效内边距？

你的代码无法实现预期效果，核心原因是：默认的content-box盒模型会让padding额外扩大容器尺寸，且给带背景图的容器直接加padding时，背景图会填充到padding区域，导致图片和边框之间没有空白间距。下面提供两种可靠方案：

方案一：嵌套Div结构（最直观易维护） #

用外层容器实现红色圆形边框和空白间距，内层容器放置背景图，清晰分离各元素层级：

<div style="
  width: 92px; /* 50px图片宽高 + 20px*2间距 + 1px*2边框 */
  height: 92px;
  border-radius: 50%;
  padding: 20px;
  border: 1px solid red;
  box-sizing: border-box;
">
  <div style="
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
    background-size: cover;
    background-position: center;
  "></div>
</div>

如果想让容器整体尺寸固定为50px，可调整间距大小适配：

<div style="
  width: 50px;
  height: 50px;
  border-radius: 50%;
  padding: 8px; /* 根据整体尺寸调整间距 */
  border: 1px solid red;
  box-sizing: border-box;
">
  <div style="
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
    background-size: cover;
    background-position: center;
  "></div>
</div>

• 外层容器的padding就是图片与红色边框的空白间距，border-radius:50%实现圆形，box-sizing:border-box让容器尺寸包含padding和border。
• 内层容器继承外层的可用空间，同样设置圆形裁剪，背景图就会被限制在中间区域，与边框形成明显间距。

方案二：利用背景裁剪与透明边框（无嵌套） #

如果不想嵌套div，可以用透明边框模拟间距，结合background-clip限制背景图只在内容区显示：

<div style="
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-image: url('https://m.media-amazon.com/images/I/41erGZf8kNL._AC_.jpg');
  background-size: cover;
  background-position: center;
  background-clip: content-box;
  border: 20px solid transparent;
  box-sizing: border-box;
  outline: 1px solid red;
">
</div>

• border:20px solid transparent作为图片与红色边框的空白间距，outline:1px solid red实现外层红色圆形边框。
• background-clip:content-box让背景图只在容器的内容区（50px - 20px*2 = 10px）显示，从而形成图片与边框的间距。

原代码问题拆解 #

1. 盒模型问题：默认box-sizing:content-box下，width:50px仅代表内容区宽度，加上padding:20px和border:1px后，容器总尺寸变为50+40+2=92px，超出预期。
2. 背景图填充范围：background-origin:padding-box让背景图从padding区域开始填充，导致图片直接延伸到边框内侧，看不到空白间距。

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