如何让div内的背景图与边框保持间距？

默认情况下，CSS的background-clip属性值为border-box，这会让背景图延伸覆盖到边框所在的区域，所以你设置的padding无法让背景图和边框产生间距——padding仅控制内部内容的位置，不影响背景图的绘制范围。

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

方法一：使用background-clip: padding-box #

直接给目标div添加background-clip: padding-box属性，限制背景图仅在padding区域内绘制，这样背景图就会和边框保持你设置的padding间距。

修改后的代码：

#railwayblock {
  height: 500px;
  border-style: solid;
  border-width: 10px;
  border-color: green;
  padding-right: 50px;
  padding-left: 50px;
  background-image: url("https://via.placeholder.com/800");
  background-size: cover;
  background-clip: padding-box; /* 关键属性 */
}

<div id="railwayblock"></div>

方法二：嵌套div实现 #

如果需要兼容更旧的浏览器，可以用嵌套div的方式：外层div设置边框和padding，内层div承载背景图，外层的padding自然就是边框和背景图的间距。

修改后的代码：

#railwayblock {
  height: 500px;
  border-style: solid;
  border-width: 10px;
  border-color: green;
  padding-right: 50px;
  padding-left: 50px;
  box-sizing: border-box; /* 避免padding增加元素总宽度 */
}
#railwayblock .bg-inner {
  width: 100%;
  height: 100%;
  background-image: url("https://via.placeholder.com/800");
  background-size: cover;
}

<div id="railwayblock">
  <div class="bg-inner"></div>
</div>

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