0

I am building a calculator for a school project, but there is a non-existing margin between the button's in my HTML & CSS and I have no idea how to get rid of it. I have been trying to get rid of it for a day and even asked my teacher who also had no idea.

Hopefully 1 of you people know what could cause this and how to fix it

@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>

IMAGE: https://ibb.co/rGcV9mq

Ralkey
  • 19
  • 1
  • 8
  • The code you shared doesn't recreate the image. Please [edit] your question and add necessary code to create a [mcve] – T J Mar 16 '21 at 13:10
  • 1
    It's not margin, it's [whitespace](https://css-tricks.com/fighting-the-space-between-inline-block-elements/). – chazsolo Mar 16 '21 at 13:12

1 Answers1

0

It's not margin, it's whitespace. Buttons, like text or <span> elements are inline elements. Because of this, the browser interprets space between them (including line breaks) as if it's the space between words. To remove the space, you can use comments like this, or place your buttons beside each other without 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>
Sean
  • 6,873
  • 4
  • 21
  • 46