Html Question posted in
Some basic documentation can be found here.

Html – Gap between buttons in css

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>
Tags:

2

Answers


  1. 0

    You need to remove between your buttons.
    Common approaches:

    1. Add an HTML comment between them
    2. 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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search