如何在图像之间保持一致的间距？答案

【问题标题】：How can I have consistent spacing between my images?如何在图像之间保持一致的间距？
【发布时间】：2020-09-26 01:05:13
【问题描述】：

我正在尝试使用 CSS 来获得 HTML 代码技能部分中列出的图像之间的一致间距。这是代码：

.skilllogos {
  height: 100px;
  width: 100px;
}

.jslogo {
  padding-left: 14px;
}

<div class="skill-row">
  <img class="skilllogos" src="images/html.svg" alt="html-icon">
  <img class="skilllogos" src="images/css3.svg" alt="css-icon">
  <img class="skilllogos jslogo" src="images/javascript.svg" alt="javascript-icon">
</div>

将填充添加到 jslogo 似乎确实可以解决问题（这就是我试图解决它的方法）但似乎我正在贴上鸭胶带来解决问题，并且可能有更好的方法来做到这一点.如果我更改图像的高度和宽度，那么间距将再次变得不一致，这是一种硬编码，我不希望这样。如果您还没有猜到，我对 Web 开发非常陌生，因此非常感谢您的帮助！谢谢！

【问题讨论】：

请尝试给图片添加轮廓，看看图片间距是否一致。我怀疑您的 svg 图片可能包含空格
不要使用填充，而是对图像本身或.skilllogos{margin: 10px;}等类使用边距
添加 display:inline-block 到图片
所以我为图像添加了一个边框，是的，它们没有在框内居中，这是问题所在。这是一张向您展示它的样子的图片 ---> imgur.com/OlrN6tb
您应该设置height 并设置width: auto。这也将解决您的居中问题。查看我编辑的答案 - 示例。

标签： html css svg css-position spacing

【解决方案1】：

我想这就是你要找的东西

.skilllogos {
    height: 100px;
    width: auto;
}

.skilllogos:not(:last-of-type) {
    padding-right: 14px;
}

<div class="skill-row">
    <img class="skilllogos" src="images/html.svg" alt="html-icon">
    <img class="skilllogos" src="images/css3.svg" alt="css-icon">
    <img class="skilllogos" src="images/javascript.svg" alt="javascript-icon">
</div>

【讨论】：

不使用 jsFiddle 等外部链接，Stack Overflow 上的首选方法是使用直接在问题中运行的 Stack Snippets。见how to use Stack Snippets
@FluffyKitten 用 Stack Snippet 更新了我的答案

【解决方案2】：

试试这个

而不是添加 padding-left 将 padding 添加到所有

body{
  background :#111;
  margin:20px auto;
  text-align:center;
}
.skill-row{
  padding:10px;
  background:#fff;
}
.skill-row img{
  padding:14px;
  border:1px solid #111;
}

<div class="skill-row">
  <img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+HTML+5+" alt="html-icon">
  <img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+CSS+3+" alt="css-icon">
  <img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.svg&text=+JS+5+" alt="javascript-icon">
</div>

添加边框以通过仅添加 js 徽标来了解空间 bwteen 图像，而不是添加所有徽标

.skilllogos {
  height: 100px;
  width: 100px;
  border:2px solid #111;
  padding:14px;
}

<div class="skill-row">
  <img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+HTML+5+" alt="html-icon">
  <img class="skilllogos" src="https://dummyimage.com/100x100/de4242/fff.png&text=+CSS+3+" alt="css-icon">
  <img class="skilllogos jslogo" src="https://dummyimage.com/100x100/de4242/fff.png&text=+JS+5+" alt="javascript-icon">
</div>

【讨论】：

我尝试了这个并在图像周围添加了一个边框，以查看它的间距是否正确，但是图标本身似乎没有在它们自己的块中居中（特别是 html.svg）。这是一张图片：imgur.com/rnkQga8
在这种情况下，您需要编辑最后一个 svg 元素。添加填充并不能解决问题。正在修补它。