背景重复CSS属性，没有像示例中那样留下水平空格，知道为什么吗

Question

我试图遵循HTML&Youtube上的CSS教程(https://youtube.com/clip/UgkxkQMYSa9X-wsDusL62-Xe1nfFmPPNJ8WV)

他的榜样
我的示例

[在此输入图像描述][3]

我注意到他的代码和我的代码的结果之间的差异，即在他的例子(第一个图像(中，图像之间有水平空间，而我的例子(第二个图像(则没有，尽管HTML和CSS文件上的代码是相同的

那么，情况似乎是怎样的呢？

编辑p。S当我试图让它装满容器时，也是同样的图像background-size: cover;属性图像填充了容器，但它没有居中，知道为什么吗？

.small-img {
border: 2px solid red;
background-image: url("https://i.stack.imgur.com/C9lng.jpg");
background-repeat: repeat;    
}

<div class="small-img">
<h1>I AM SMALL IMAGE</h1>
</div>

Answer 1

您可以定义背景图像大小并将背景重复设置为空格；在这种情况下，样式将用图像填充容器，并自动在这些图像之间添加间隙。

.small-img {
border: 2px solid red;
background-image: url("https://i.stack.imgur.com/C9lng.jpg");

height: 11rem;
background-size: 5rem;
background-repeat: space;
}

<div class="small-img">
<h1>I AM SMALL IMAGE</h1>
</div>