【问题标题】：Is there a way to add margin or padding to list style images?有没有办法为列表样式图像添加边距或填充？
【发布时间】：2020-12-14 09:25:02
【问题描述】：

我正在尝试创建一个网页。在页面的页脚中我有一个列表。我的代码显示第一个图像，而它应该看起来像第二个图像。

对于代码，您可以从 github 存储库中看到它： "https://github.com/nganbarova/Huddle.git"

【问题讨论】：

【解决方案1】：

要获得准确的答案，我需要先查看您的代码，但有一些一般性建议可供您参考。如果您使用的是 font-awesome，您可以简单地将其添加到您的样式表文件中：

li i { margin-right:5px; } or li fa { margin-right:5px; }

如果您使用图像作为图标，请使用这个：

li img { margin-right:5px }

您可以将边距的属性值更改为适合您的任何值。

【讨论】：

【解决方案2】：

我建议您为每个 LI 项目使用不同的类，然后使用 ::before 伪元素。然后，您可以设置样式并将其移动到任何您需要的位置。

li {
  position: relative;
}

li.myClass::before {
 content: url('image.png');
 position: absolute;
 top: 0;
 left: 0;
 width: 20px;
 height: 20px;
}

【讨论】：

【解决方案3】：

你还没有展示你的代码，所以我会给你通用且易于理解的缩进方法。但是，如果您将代码粘贴到此处，效率会更高。

1 使用 flex 的方法：

对于父容器（其中有点），您指定准确的高度和弹性规则。这些项目将均匀分布在容器中：

parent_selector {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 500px;
}

2 使用网格的方法：

Grid 有一个 grid-gap 规则，可以在不影响第一个元素的情况下设置间距：

parent_selector {
  grid-gap: 10px;
}

同时使用 :not 和 :first-of-type 伪类将允许您缩进除第一个元素之外的每个内部元素。

parent_selector p:not(:first-of-type) {
  margin-top: 10px;
}

所有这些方法都易于使用，但如果您显示您的代码会更好。如果您有任何问题，请在 cmets 中写在这里。

【讨论】：