如何使图像之间的间距保持一致？

Question

我正在尝试使用 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 似乎确实解决了问题（这就是我试图解决它的方法）但似乎我正在使用胶带来解决问题并且可能有更好的方法做这个。如果我更改图像的高度和宽度，那么间距将再次变得不一致，这是一种硬编码，我不希望这样。如果您还没有猜到，我是网络开发的新手，所以非常感谢您的帮助！谢谢！

Answer 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>

Answer 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 徽标而不是通过

添加所有徽标来添加边框以了解 space 之间的图像

.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>

如何使图像之间的间距保持一致？

How can I have consistent spacing between my images?

html

css

svg

css-position

spacing