我无法摆脱这个不存在的保证金

Question

我正在为一个学校项目构建一个计算器，但是我的 HTML 和 CSS 中的按钮之间没有空白，我不知道如何摆脱它.弄了一天了，问老师也不知道。

希望你们中的 1 位知道可能导致此问题的原因以及解决方法

@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');

html,
body, * {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Recursive', sans-serif;
    box-sizing: border-box;
}

body {
    background-image: linear-gradient(to bottom right, #0c0715, #372c88);
    color: white;
    position: relative;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 25%;
    height: 50%;
}

.number-showcase {
    position: relative;

    background-color: #0c07154b;
    height: 30%;
}

.number-showcase p {
    position: absolute;
    right: 0;
    bottom: 0;

    font-size: 3em;
    color: hsla(0, 0%, 100%, 0.8);
}

.buttons {
    width: 100%;
    height: 100%;
}

.buttons div {
    width: 100%;
}

.buttons div button {
    width: 25%;
    height: 25%;
}

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="number-showcase">
        <p id="text-1"></p>
    </div>
    <div class="buttons">
        <div>
            <button id="1" class="cijfers">1</button>
            <button id="2" class="cijfers">2</button>
            <button id="3" class="cijfers">3</button>
            <button id="4" class="cijfers">4</button>
            <button id="5" class="cijfers">5</button>
            <button id="6" class="cijfers">6</button>
            <button id="7" class="cijfers">7</button>
            <button id="8" class="cijfers">8</button>
            <button id="9" class="cijfers">9</button>
            <button id="0" class="cijfers">0</button>
        </div>
        
        <div>
            <button id="plus" class="tekentjes" value="+">+</button>
            <button id="minus" class="tekentjes" value="-">-</button>
            <button id="times" class="tekentjes" value="x">x</button>
            <button id="slash" class="tekentjes" value="/">/</button>
        </div>

        <div>
            <button id="equals" class="equals">=</button>
        </div>
    </div>
</div>

<script src="rekenmachine.js"></script>
</body>
</html>

图像： https://ibb.co/rGcV9mq

Answer 1

不是缘，是白space。按钮，如文本或 <span> 元素是 inline elements。因此，浏览器将它们之间的 space（包括换行符）解释为单词之间的 space。要删除 space，您可以使用这样的注释，或者将您的按钮并排放置而不使用 space。

html,
body,
* {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Recursive', sans-serif;
  box-sizing: border-box;
}

.buttons {
  width: 100%;
  height: 100%;
}

.buttons div {
  width: 100%;
}

.buttons div button {
  width: 25%;
  height: 25%;
}

<div class="container">
  <div class="buttons">
    <div>
      <button id="1" class="cijfers">1</button><!--
   --><button id="2" class="cijfers">2</button><!--
   --><button id="3" class="cijfers">3</button><!--
   --><button id="4" class="cijfers">4</button><!--
   --><button id="5" class="cijfers">5</button><!--
   --><button id="6" class="cijfers">6</button><!--
   --><button id="7" class="cijfers">7</button><!--
   --><button id="8" class="cijfers">8</button><!--
   --><button id="9" class="cijfers">9</button><!--
   --><button id="0" class="cijfers">0</button>
    </div>
  </div>
</div>

我无法摆脱这个不存在的保证金

I can't get rid of this non existing margin

html

css

margin