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

【问题标题】：Unwanted padding around buttons. CSS按钮周围不需要的填充。 CSS
【发布时间】：2017-01-24 16:33:03
【问题描述】：

晚上好。我需要有关 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>

我们将不胜感激以这种方式提供的任何帮助。提前谢谢你。

【问题讨论】：

按钮是内联元素吗？可能需要让它们阻挡或移除它们周围的空白区域
分享一个工作示例。您分享的代码很好，没有填充。
Best way to manage whitespace between inline list items的可能重复

标签： html css firefox button padding

【解决方案1】：

像这样更新你的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/

【讨论】：

【解决方案2】：

一种可能的解决方案：

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

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

但是在这种布局中使用 Flexbox 不是更好吗？

【讨论】：

【解决方案3】：

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

*{    
    padding:0;
    margin:0;
}

【讨论】：

我试过了。没用。右边的填充没有去。
提供一个小提琴，我可以提供更多帮助
嗯，什么是小提琴？
正如@Joseph 所说，问题不在于填充，而在于空格。删除按钮之间的空格。这里。 jsfiddle.net/MrLister/bcknsy68/1