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

【问题标题】：How do I bypass the default padding in Electron?如何绕过 Electron 中的默认填充？
【发布时间】：2021-07-05 05:36:08
【问题描述】：

在电子中，我注意到默认情况下，有一个填充将我的 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;
  }

【问题讨论】：

用户代理有默认样式。

标签： javascript html css electron

【解决方案1】：

试试这个

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

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

【讨论】：