Html - Gap between buttons in css

Anuj
January 13, 2024
204 views
0 votes
2 Answers

I want the buttons to all stick together without any gap between them to design a calculator.

But there is a gap that i can’t get rid of even after trying to remove the borders, padding and margin. How can do that ?

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.calculator {
  display: flex;
  width: 200px;
  flex-wrap: wrap;
}

button {
  width: 25%;
}

<div class="calculator">
  <!-- <div class="output"></div> -->
  <div class="calcKeys">
    <button>+</button>
    <button>-</button>
    <button>X</button>
    <button>÷</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>=</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>0</button>
    <button>.</button>
    <button>AC</button>
  </div>
</div>

Answers

You need to remove between your buttons.
Common approaches:

Add an HTML comment between them
Just remove spaces (usually will be done is you’re doing HTML modification in your build steps)

See the demo of both methods below. 1st method for the first row, and 2nd method for the 2nd row.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.calculator {
  display: flex;
  width: 200px;
  flex-wrap: wrap;
}

button {
  width: 25%;
}

<div class="calculator">
  <!-- <div class="output"></div> -->
  <div class="calcKeys">
    <button>+</button><!--
    --><button>-</button><!--
    --><button>X</button><!--
    --><button>÷</button><button>7</button><button>8</button><button>9</button><button>=</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>0</button>
    <button>.</button>
    <button>AC</button>
  </div>
</div>

Use the flex display style, and set the gap to 0 and flex-wrap to wrap
and set the buttons width to 33.33%

check this snippet

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.calculator {
  display: flex;
  width: 200px;
  flex-wrap: wrap;
}

button {
  width: 33.33%;
}

.calcKeys {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

<div class="calculator">
  <!-- <div class="output"></div> -->
  <div class="calcKeys">
    <button>+</button>
    <button>-</button>
    <button>X</button>
    <button>÷</button>
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>=</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>0</button>
    <button>.</button>
    <button>AC</button>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Gap between buttons in css

Answers