html - 即使margin和padding值为0，父元素和子元素之间也存在一些差距

Question

我正在使用 React 框架开发我的网站，但我认为我遇到了显示问题。

工具

• 视觉工作室代码
• 节点.js
• 边缘浏览器
• Chrome 浏览器

图书馆

• Next.js
• 尾风CSS

我从 TailwindCSS 库中编写了带有边框的div元素和 4 个子元素div

HTML 代码

<div className="border m-auto">
  <div className="border">div 1</div>
  <div className="border">div 2</div>
  <div className="border">div 3</div>
  <div className="border">div 4</div>
</div>

我使用globals.cssNext.js 中的默认设置padding: 0;和margin: 0;默认设置

全局 CSS 代码

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

当我启动开发模式npm run dev时，我的元素上会出现一些间隙显示，就像这张图片一样。您会看到父元素和子元素之间显示有一些间隙。但是当我将我的 Edge 和 Chrome 浏览器缩放到 200% 像这张图片（和一些其他值）时，差距就像这张图片一样消失了。但它完美地显示在我的 iPad Air 和 iPhone 5 上。

我尝试过但没有奏效的解决方案

• 将 Windows 显示设置缩放为 100%。
• 删除 TailwindCSS 库（不再使用class属性进行装饰）并使用style相同的属性来装饰元素。

<div style={{ border: "1px solid red" }}>
  <div style={{ border: "1px solid red" }}>div 1</div>
  <div style={{ border: "1px solid red" }}>div 2</div>
  <div style={{ border: "1px solid red" }}>div 3</div>
  <div style={{ border: "1px solid red" }}>div 4</div>
</div>

• 通过记事本创建单个 HTML 文件（纯 HTML）并使用style属性来装饰元素。

<div style="border: 1px solid red">
  <div style="border: 1px solid red">div 1</div>
  <div style="border: 1px solid red">div 2</div>
  <div style="border: 1px solid red">div 3</div>
  <div style="border: 1px solid red">div 4</div>
</div>

• 使用最新版本的 Internet Explorer，它可以工作，但我知道它不完全支持 CSS，所以我在此测试中不计入 Internet Explorer。

这是浏览器显示的问题还是其他？有什么解决办法吗？

标签： htmlcssnode.jsgoogle-chromemicrosoft-edge