按钮周围多余的填充.CSS

晚上好。我需要CSS方面的帮助。我知道这个问题已经解决了很多次，但由于某种原因，它似乎不适合我的程序。这个脚本是设计一个8x8的板，板上的单元格是8种不同的颜色之一。所以我打算做的是定义一个div，以黑色背景为中心。在这个div中是我的board。由于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>

在这方面的任何帮助将是非常感激的。提前感谢您

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

just add

<!-- -->

<button></button>

确保是这样的

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

不

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

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

你可以用它来删除所有项的padding

*{    
    padding:0;
    margin:0;
}

一个可能的解决方案:

/* 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来做这个布局不是更好吗?

相关内容

最新更新

热门标签：