为什么 React 的默认边距与普通 html 不同？答案

【问题标题】：Why is the default margin different with React than with plain html?为什么 React 的默认边距与普通 html 不同？
【发布时间】：2020-11-15 02:54:59
【问题描述】：

<button> 元素之间的边距不同，这取决于它是由 react 渲染还是只是普通的旧 html。普通的旧 html 在按钮之间添加了一个小边距，而 react 完全删除了它。

有人知道为什么这些不同吗？有没有办法在 React 中恢复默认边距？

详情

以下是使用 create react app 以 500% 缩放创建的简单 react 应用的结果：

我获取了 react 生成的源 html，复制了它，然后放入另一个我在浏览器上打开的 index.html 文件中。再次以 500% 显示：

请注意，没有添加额外的 CSS。开发者工具看起来完全一样。

复制步骤：

反应

使用npx create-react-app <some name> 创建一个反应应用程序
从生成的index.css 中删除所有 css
在index.js 文件中使用以下jsx：

  <React.StrictMode>
        <button>Vanilla</button>
        <button>Vanilla</button>
  </React.StrictMode>

纯 HTML

我从 react 应用复制了在浏览器中呈现的 html，并将其粘贴到单独的 index.html 文件中。 html 看起来像：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
        <button>Vanilla</button>
        <button>Vanilla</button>
    </div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/0.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

【问题讨论】：

react 可能会在发送之前缩小代码，因此内联框之间没有间隙 :) <div id="root"><button>Vanilla</button><button>Vanilla</button></div>
哇，是的，就是这样！谢谢！

标签： html css reactjs

【解决方案1】：

感谢 G-Cyrillus，我们发现问题的发生是因为 react 正在缩小 html。所以jsx：

<React.StrictMode>
  <button>Vanilla</button>
  <button>Vanilla</button>
</React.StrictMode>

一旦缩小，就会变成：

<button>Vanilla</button><button>Vanilla</button>

我发现保持差距的解决方案是这样编写jsx：

<React.StrictMode>
  <button>Vanilla</button> <button>Vanilla</button>
</React.StrictMode>

【讨论】：

A related link