对html中换行符的效果感到困惑吗

我的印象是，在我的文本编辑器中按Enter键添加一个换行符（唯一目的是保持代码整洁/易于阅读），对渲染输出“没有影响”

显然我错了。下面代码段中的示例清楚地表明，我的换行符在

之后添加了不需要的间距

• 我尝试了

  box size:border-box

  ，但没有效果（大概是因为没有边框）
• 负边距似乎可以解决这个问题，但这似乎不是一个合理的解决方案，因为我想在任何地方添加换行符以保持代码整洁

为什么会这样？有没有办法避免这种情况，或者从现在起我应该只编写一行很长的代码

span{
显示：内联块；
高度：20vh；
宽度：10vw；
背景色：红色；
}
span:n个孩子（偶数）{
背景颜色：绿色；
}

在元素上设置位置

内联块

会考虑空格，因此返回到编辑器中的新行将反映在浏览器中，

span

元素是否需要是

内联块

？要增加复杂性，您有两个空格：由空白创建的水平空格和由基线对齐创建的垂直空格（添加了两个重复项），我想我的困惑最终归结为我对

与

的最初理解存在根本性缺陷。回到过去一段时间很有帮助。：-）在元素上设置position

inline block

时会考虑空格，因此返回到编辑器中的新行将反映在浏览器中，

span

元素是否需要是

内联块

？要增加复杂性，您有两个空格：由空白创建的水平空格和由基线对齐创建的垂直空格（添加了两个重复项），我想我的困惑最终归结为我对

与

的最初理解存在根本性缺陷。回到过去一段时间很有帮助。：-）