Javascript React删除空格

下面是一个跨度元素列表

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>

结果在React应用程序和本地html+css文件中看起来不同

链接到Codepan

如屏幕截图所示：

如何使React显示元素之间的空间

这是反应组件：

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  render() {
    return (
      <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
1.
2.
3.
4.
5.
);
}
}
导出默认应用程序；

这是React的预期行为

可以在每个跨距之间添加空白文本空间

<span>1</span>
{' '}
<span>2</span>

1
{' '}
2.

将此添加到

应用程序。css

应该可以工作

span {
  background: red;
  margin-left: 2px;
}

---

它使用

margin

来实现这个技巧。根据需要调整其值。

在

应用程序中添加此css。css

：

解决方案A：

span{
背景：红色；
右边距：5px；
}

12345

您可以包括您的react组件吗？请添加您的react.JS代码。添加react组件的代码。这个App.css文件和CodePant上的代码是一样的。问题是，在我的实际项目中，我有很多元素需要这些空格，我很难手动放置它们。如果你只是想要空的空格，为什么不使用边距呢？因为网站模板不是在React上制作的，我不知道react中有空格的问题，我知道这个修复程序，我必须将它添加到我使用内联块的每个组件中，并且有太多的组件无法手动修复。你在哪里导入App.css？如果在输入文件

index.js

span {
  background: red;
  margin-left: 2px;
}