按钮周围不需要的填充。 CSS

Question

晚上好。我需要有关 CSS 的帮助。我知道这个问题已经解决了很多次，但出于某种原因，它似乎对我的程序不起作用。此脚本用于设计一个 8x8 板，板上的单元格是 8 种不同颜色之一。所以我打算做的是定义一个 div，以黑色背景为中心。在这个 div 中将是我的董事会。由于纵向和横向需要 8 个单元格，我将按钮的宽度和高度各自的属性设置为 12.5%，即 (100/8)% 我没有指定任何显式填充，但所有按钮仍然由一些相关联（主要在右边）

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>

如能以这种方式提供任何帮助，我们将不胜感激。提前致谢。

Answer 1

您可以使用它来删除所有项目的填充

*{    
    padding:0;
    margin:0;
}

Answer 2

像这样更新您的 html：

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

只需添加

<!-- -->

在

之间

<button></button>

确保是这样的

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

没有

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

看这里：https://jsfiddle.net/4vn4pv18/

Answer 3

一个可能的解决方案：

/* 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>

主要技巧是删除标签间的空白字符，包括换行符（如前所述）并使默认行高小于按钮的高度（因为它们的行为类似于 inline-block 元素，它们不能使行低于其默认高度，只能更高)。

但是对于这种布局使用 Flexbox 不是更好吗？

按钮周围不需要的填充。 CSS

Unwanted padding around buttons. CSS

html

css

firefox

button

padding