There seems to be a difference in margin between <button> elements when rendered by React compared to plain HTML. Plain HTML adds a small margin between the buttons, while React removes it completely.
Does anyone have an explanation for this discrepancy? And is there a way to reintroduce the default margin in React?
Details
After creating a simple React app with create react app at 500% zoom, here are the results: https://i.sstatic.net/tpIlR.png
I copied the source HTML generated by React and pasted it into another index.html file which I opened in my browser. The result at 500% zoom was as follows: https://i.sstatic.net/t8d3R.png
No additional CSS was added and the developer tools showed no differences.
Steps to replicate:
React
- Create a React app using
npx create-react-app <some name> - Remove all the CSS from the generated
index.css - Use the following JSX in the
index.jsfile:
<React.StrictMode>
<button>Vanilla</button>
<button>Vanilla</button>
</React.StrictMode>
Plain HTML
I copied the HTML that was rendered in the browser from the React app and pasted it into a separate index.html file. The HTML structure looked like:
<!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.
-->
<link rel="manifest" href="/manifest.json" />
<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>
<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>