css - CSS：向背景图像添加填充

Question

我需要为具有背景图像的类添加填充。但是，当我这样做时，填充不会添加到背景图像中，只是锚点。我究竟做错了什么？这是我的CSS：

.heart {
    width:200px;
    height:18px;
    background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
    padding-left: 20px;
    display:block;
}

Answer 1

尝试margin-left: 20px;改用。

Margin是在容器外又padding是在容器内，所以 padding 不会移动容器的背景。

Answer 2

背景可以显示基于background-origin: content-box;

.heart {
  width: 200px;
  height: 18px;
  border: 1px solid tomato;
  background: url('https://via.placeholder.com/50x100') left center repeat-y;
  padding-left: 20px;
  display: block;
  background-origin: content-box;
}

<div class="container">
  <div class="heart">x</div>
</div>

或者

另一种解决方案是background-position-x: 20px;

.heart {
  width: 200px;
  height: 18px;
  border: 1px solid tomato;
  background-image: url('https://via.placeholder.com/50x100');
  padding-left: 20px;
  display: block;
  background-position-x: 20px;
  background-repeat: repeat-y
}

<div class="container">
  <div class="heart">x</div>
</div>