如何绕过 Electron 中的默认填充？

Question

在 electron 中，我注意到默认情况下，有填充将我的 GUI 的所有内容从四面八方推近。

在下面引用的图像中，背景颜色为浅灰色，其他元素颜色不同。

https://i.stack.imgur.com/1XqyH.png

很明显整个 GUI 周围有一个边框，但我的代码中没有任何地方指定了额外的填充或边距。

我该如何去除这个边框？

这是我的代码~

Index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="theme.css">
    <script src="https://kit.fontawesome.com/46eafe3431.js" crossorigin="anonymous"></script>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' https://kit.fontawesome.com/46eafe3431.js">
    
  </head>
  <body id=background-test-color>
    <div id=header> 
      <button id='minimize-btn'><i class="far fa-window-minimize"></i></button>
      <button id='max-unmax-btn'><i class="far fa-square"></i></button>
      <button id='close-btn'><i class="fas fa-times"></i></button>
    </div>
    <div class='highlight'>
      <!-- menu bar -->

      <pre>
        <h1> Hello World!</h1>
        <p>Welcome to your Electron application.</p>
      </pre>
    </div>
  </body>
</html>

index.css

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#header {
  /* width: 100%; */
  height: auto;
  background-color: bisque;
  margin-top: auto;
  margin-bottom: auto;
  text-align: right;
  
}

#background-test-color {
  background-color: darkgray;
}

theme.css

.highlight pre, pre, .highlight .hll, body {
    background-color: #33322c;
    border: 1px solid #ccc;
    /* padding: 6px 10px; */
    /* border-radius: 3px; */
    color: #FFFFFF;
  }

Answer 1

试试这个

body {
    margin: 0;
    text-align: center;
}

然后您可以从#header 中删除负边距。

如何绕过 Electron 中的默认填充？

How do I bypass the default padding in Electron?

html

javascript

css

electron