如何移除背景图片周围的padding？附示例代码

嘿，我帮你分析了下：你看到的“背景图周围的padding”其实不是元素真的设置了内边距，而是SVG背景图本身的 viewBox 包含了额外的空白空间，导致显示出来看起来像有padding。下面给你两种实用的解决办法：

办法1：修改SVG的viewBox，精准适配图形 #

你的SVG viewBox设的是0 0 24 24，但里面的图标并没有填满这个24x24的画布。我们可以把viewBox改成刚好框住图标的范围，裁剪掉多余空白。比如改成3 3 18 18（这个数值是对着图标位置估算的，刚好能把图标完整框住），修改后的CSS代码如下：

.foo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='3 3 18 18'%3E%3Cpath fill='%23f39c12' d='M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 8em 8em;
  height: 8em;
  width: 8em;
}

办法2：用CSS背景属性微调，不用改SVG #

如果不想动SVG代码，也可以通过调整背景的缩放和位置来“切掉”空白：

.foo {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23f39c12' d='M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* 把背景图放大一点，覆盖掉周围空白 */
  background-size: 10em 10em;
  /* 让背景图居中，超出元素的部分会被自动裁剪 */
  background-position: center;
  height: 8em;
  width: 8em;
}

小提醒：第一种方法更靠谱，从根源解决了SVG留白的问题；第二种适合快速调试，不用碰SVG源码，看你需求选就行~

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