如何减少同一div中HTML元素之间的空间

如何减少同一div中元素之间的空间（一行中有3个元素）？我试图减少左边的边距，但这使得每行出现4个元素

完整代码-

。动物{
宽度：200px；
浮动：左；
高度：20px；
边界半径：8px；
填充：20px；
边缘顶部：30px；
左边距：300px；
背景色：#23213E；
}

${pet.name}

---

您可以添加此CSS，它可能对您有所帮助：

.animal {
    width: calc((75%-40px)/3);
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
  }
  #app {
    width: 100%;
    height: 100%;
  }

结果如下：

---

为了使3只动物在一条线上，你必须设置最大宽度，我修改了一些css来解决这个问题

#app {
  max-width: 900px;
  text-align: center;
}
 .animal {
    width: 200px;
    margin: 15px;
    /* float: left; */
    height: 20px;
    border-radius: 8px;
    padding: 20px;
    display: inline-block;
    /* margin-top:30px; */
    /* margin-left: 300px; */
    background-color: #23213e;
  }

---

为了在一行中包含3个项目，您可以使用FlexBox：

#应用程序是您的父div 动物就像孩子一样

flex是25%，因为我们希望在每两种动物之间增加利润

---

是否希望3只动物在一行上？您的HTML标记无效。您缺少了一个

closign标记，并且有更多的

结束标记，而您有开始标记。除此之外。您可能是指标题造成的空白。你可以用：

h2{margin:…；}

回答你的问题吗？是的，我想要3只动物在一条线上。

#app {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.animal {
  height: 20px;
  border-radius: 8px;
  background-color: #23213e;

  margin: 20px 15px;
  padding: 20px;
  flex: 0 0 25%;
}