Shashank shet Shashank shet - 2 months ago 6
CSS Question

Unwanted padding around buttons. CSS

Good evening. I needed help regarding CSS. I know this issue has been solved a number of times, but for some reason it doesn't seem to work for my program.
This script is to design an 8x8 board, with the cells on the boards being one of 8 distinct colors. So what I intended to do was to define a div, centred in a black background. Within this div would be my board. Since 8 cells are needed lengthwise and breadthwise, I set the respective attributes of width and height of the buttons, to 12.5%,ie, (100/8)% I have NOT specified any explicit padding, but still all buttons are associated by some(mainly on the right).



html,
body {
height: 100%;
width: 100%;
}
button::-moz-focus-inner
/*Recommended fix. But not working*/

{
border: 0;
padding: 0;
}
.c1 {
/*For coloring the buttons*/
background-color: #cdaf95;
}
/*Here is the code for classes c2 -c7*/

.c8 {
background-color: #5e2612;
}
.col1 {
/*For defining the size of the buttons.*/
width: 12.5%;
height: 12.5%;
padding: 0;
border: 0;
}
/*Here is code for classes col2-col7*/

.col8 {
width: 12.5%;
height: 12.5%;
padding: 0;
border: 0;
}
/*Board is the id of the division*/

#board {
height: 50%;
width: 50%;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 400px;
max-height: 400px;
position: absolute;
margin: auto;
background-color: white;
}

<body bgcolor="black">
<style>
</style>
<div id="board">
<button class="col1 c1"></button>
<button class="col2 c1"></button>
<button class="col3 c1"></button>
<button class="col4 c1"></button>
<button class="col5 c1"></button>
<button class="col6 c1"></button>
<button class="col7 c1"></button>
<button class="col8 c1"></button>
<button class="col1 c2"></button>
<button class="col2 c2"></button>
<!--And so on upto c8. Thats a total of 64 buttons forming an 8x8 board-->
<button class="col7 c8"></button>
<button class="col8 c8"></button>
</div>
</body>





Any help in this manner would be greatly appreciated. Thanking you in advance.

Answer

Update your html like this:

<body bgcolor="black">
  <div id="board">
<button class="col1 c1"></button><button class="col2 c1"><!--
--></button><!--
--><button class="col3 c1"></button><!--
--><button class="col4 c1"></button><!--
--><button class="col5 c1"></button><!--
--><button class="col6 c1"></button><!--
--><button class="col7 c1"></button><!--
--><button class="col8 c1"></button><!--
--><button class="col1 c2"></button><!--
--><button class="col2 c2"></button><!--
--><button class="col7 c8"></button><!--
--><button class="col8 c8"></button>
  </div>
</body>

just add

<!-- -->

between the

<button></button>

Make sure that is like this

<button></button><!-- --><button></button>

not

<button></button>  <!-- --><button></button>
<button></button><!-- -->   <button></button>

See here: https://jsfiddle.net/4vn4pv18/

Comments