如何在CSS中为容器内的背景SVG添加内边距？

嘿，这个问题我之前也碰到过，有几个实用的小技巧可以解决，我给你一步步说：

这个方法能精确控制SVG和容器边框的间距，还不会破坏容器原本的尺寸。核心思路是给容器加padding，然后让背景图只在内容区域显示，padding的部分就自然形成了间距。

修改后的代码如下：

#rack-button {
  position: absolute;
  background: url('simple_rack.svg') no-repeat center; /* 改成居中显示更均匀 */
  background-size: contain;
  background-origin: content-box; /* 关键：背景只在内容区域渲染，不会覆盖padding */
  display: inline-block;
  background-color: white;
  width: 34px;
  height: 34px;
  left: 10%;
  border-radius: 5px;
  border: 2px solid #B8B8B8; /* 把border-width和border-color合并成简写 */
  padding: 4px; /* 这里设置你想要的间距大小，比如4px */
  box-sizing: border-box; /* 让padding包含在34px的宽高内，容器尺寸不变 */
}

解释一下：

• box-sizing: border-box确保容器的width/height包含padding和border，不会因为加了padding而变大
• background-origin: content-box让SVG背景只填充容器的内容区域（也就是去掉padding后的部分）
• 把background-position改成center，能让SVG在内容区域居中，间距更均匀

如果你不想修改容器的padding，可以直接缩小背景图的尺寸，让它和容器之间留出空隙。

代码示例：

#rack-button {
  position: absolute;
  background: url('simple_rack.svg') no-repeat center;
  background-size: calc(100% - 8px); /* 减去两倍的间距，左右/上下各4px */
  display: inline-block;
  background-color: white;
  width: 34px;
  height: 34px;
  left: 10%;
  border-radius: 5px;
  border: 2px solid #B8B8B8;
}

这个方法的好处是不用改动容器的布局属性，缺点是如果SVG的比例和容器比例差异较大，可能会出现上下和左右间距不一致的情况。

如果这个SVG会在多个地方复用，直接给SVG文件本身加上透明边距是一劳永逸的办法。

打开你的simple_rack.svg文件，找到根元素的viewBox属性，比如原来的viewBox="0 0 50 50"，可以改成viewBox="-4 -4 58 58"（这里的-4 -4是向左向上各偏移4px，58 58是把宽高各增加8px），这样SVG四周就自带了4px的透明区域，作为背景图使用时自然就有间距了。

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