CODEWITHSUNDEEP
htmlcssfirefoxbuttonpadding
Shashank Shet
Shashank Shet

Reputation: 334

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.

Upvotes: 0

Views: 2648

Answers (3)

Kuzuri
Kuzuri

Reputation: 38

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/

Upvotes: 1

Ilya Streltsyn
Ilya Streltsyn

Reputation: 13536

One possible solution:

/* just instead of writing 64 tags in a single row */
document.body.onload = function() {
  var out = '';
  for(var i=1; i<=8; i++)
for(var j=1; j<=8; j++)
  out += '<button class="col'+j+' c'+i+'"></button>';
  document.getElementById('board').innerHTML = out;
}
html,
body {
  height: 100%;
  width: 100%;
}
button {
  width: 12.5%;
  height: 12.5%;
  /* make sure that padding/border doesn't add up to dimensions */
  box-sizing: border-box;
  /* remove vertical spaces between lines */
  vertical-align: bottom;
}
button::-moz-focus-inner
/*really needed and 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 {
  padding: 0;
  border: 0;
}
/*Here is code for classes col2-col7*/

.col8 {
  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;
  /* make minimum height of lines of buttons as small as possible */
  line-height: 1px;
}
<body bgcolor="black">
  <style>
  </style>
  <div id="board">
  </div>
</body>

The main trick is to remove inter-tag whitespace characters, including line breaks (as already mentioned) and to make the default line height less the height of the buttons (since they behave as inline-block elements, they can't make the line lower than its default height, only higher).

But wouldn't it be better to use Flexbox for this layout?

Upvotes: 0

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

You can use this to remove paddings on all items

*{    
    padding:0;
    margin:0;
}

Upvotes: 0

Related Questions