两个宽度相等的div之间的意外空间[重复]答案

【问题标题】：Unexpected space between two divs with equal width [duplicate]两个宽度相等的div之间的意外空间[重复]
【发布时间】：2023-03-26 05:35:01
【问题描述】：

我的边距之间有这个奇怪的空间，即使对所有元素都使用 0 的边距和填充。谁能帮我理解 Chrome 中的这种行为？

谢谢！

https://jsfiddle.net/rzby6mj7/3/

HTML：

<div class="parent">
  <div class="child child-1">ONE</div>
  <div class="child child-2">TWO</div>
</div>

CSS：

*{
    margin: 0;
    padding: 0;
}

.parent{
  background-color: pink;
  height: 200px;
}

.child{
  font-size: 30px;
  width: 40%;
  display: inline-block;
}

.child-1{
  background-color: grey;
}

.child-2{
  background-color: yellow;
}

【问题讨论】：

添加浮动：左；在 .child 类上。

标签： css margin

【解决方案1】：

那是因为你的两个 div 之间的换行符。这应该可以完成工作

<div class="child child-1">ONE</div><div class="child child-2">TWO</div>

or

<div class="child child-1">ONE</div
><div class="child child-2">TWO</div>

【讨论】：

对不起，这完全没有意义
@JorgeMonte 实际上这是有道理的，因为 html 将所有透明空格（如制表符或 \n）视为空格，并且代码中的 div 之间有 3 个空格（一个换行符和两个空格或一个制表符), html 写那个空格。您是否尝试过删除换行符？
我没有投反对票，可能是其他人投了反对票。但是是的，你帮了忙，我不知道 HTML 的这种行为，因为它没有考虑要显示的元素之间的空格。谢谢！
@JorgeMonte 抱歉，但这是解决问题的最糟糕方法...检查副本以了解更多信息并获得更好的方法
谢谢特马尼