我无法摆脱这个不存在的保证金[重复]答案

【问题标题】：I can't get rid of this non existing margin [duplicate]我无法摆脱这个不存在的保证金[重复]
【发布时间】：2021-03-16 21:17:14
【问题描述】：

我正在为一个学校项目构建一个计算器，但我的 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

【问题讨论】：

您共享的代码不会重新创建图像。请edit您的问题并添加必要的代码以创建minimal reproducible example
不是margin，是whitespace。

标签： html css margin

【解决方案1】：

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

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>

【讨论】：