时间戳

首页 > 解决方案 > React 移除元素之间的间距

html - React 移除元素之间的间距

问题描述

这是一个要演示的小提琴：

html

<div>
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
</div>
<div id="app"></div>

js

function Buttons() {
  return (
    <div>
      <button>One</button>
      <button>Two</button>
      <button>Three</button>
    </div>
  );
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))

基本上无论我是否有任何样式表，将元素彼此相邻放置会导致它们之间有 9px 的空间（至少在 Chrome 上），但在 react 组件中执行完全相同的操作会在它们之间没有空间。我想知道为什么它们不一致以及如果可能的话如何使它们保持一致。

标签： htmlreactjs

解决方案

造成这种差异的原因是 React删除了 line 开头和结尾的空格。

您在 html 示例中的按钮之间看到的空间是由于<button>html 代码中的标签之间的空白字符造成的。

如果您将 React 代码更改为以下内容，您将获得类似于您的 html 示例的结果：

function Buttons() {
  return (
    <div>
      <button>One</button> <button>Two</button> <button>Three</button>
    </div>
  );
}
ReactDOM.render(<Buttons />, document.querySelector("#app"))

我的建议是让 React 删除元素之间的空白，并使用 css 正确控制间距。

推荐阅读