Question

我想删除2行之间的间距。该表是仅限css的表。

CSS：

* {
    padding: 0px;
    margin: 0px;
}

div.table {
    display: table;
    border-collapse: collapse;
    table-layout:fixed;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    padding:0; margin:0;
}

.button {
    width: 88px;
    height: 55px;
    border: none;
    margin: 0px;
    padding: 0px;
}



#ac {
    background-image: url('http://i.imgur.com/u9znwQK.png');
    background-size: 100%;
}

#ce {
    background-image: url('http://i.imgur.com/azae5uQ.png');
    background-size: 100%;
}

#multiplication {
    background-image: url('http://i.imgur.com/veBf82o.png');
    background-size: 100%;
}


#division {
    background-image: url('http://i.imgur.com/i6KcXGr.png');
    background-size: 100%;
}


#number7 {
    background-image: url('http://i.imgur.com/0GixHJ5.png');
    background-size: 100%;
}

HTML：

<div class="container">
        <div class="table" id="calculator">
            <div class="tr">
                <div class="td" id="display"></div>
            </div>
            <div class="tr">
                <div class="td">
                    <button class="button" id="ac"></button>
                </div>
                <div class="td">
                    <button class="button" id="ce"></button>
                </div>
                <div class="td">
                    <button class="button" id="division"></button>
                </div>
                <div class="td">
                    <button class="button" id="multiplication"></button>
                </div>
            </div>
            <div class="tr">
                <div class="td">
                    <button class="button" id="number7"></button>
                </div>
            </div>
        </div>
    </div>

在这个圆圈之间我想要没有间距。 http://i.imgur.com/a3wMyLA.png

布局基于一个表格div，它具有固定的表格布局和显示表格。此外，我将边框折叠设置为折叠，每个填充和边距为0px。

由于某种原因，按钮为55像素，但div的高度为59像素。

Answer 1

添加font-size:0;，如下所示：

div.td {
  display: table-cell;
  padding:0; margin:0;
  font-size:0;
}

这将解决您的问题。但是，只有当你在td元素中没有任何文本时，这才会起作用，就像你展示的情况一样。

Answer 2

显然，这是由line-height的{{1}}引起的。您可以将其明确设置为table-cell以解决问题：

0.8

Answer 3

这种情况只发生在Chrome和IE浏览器中（不在Firefox中，有趣......），您也可以通过这种方式修复它：

npm install -g cordova@6.3.1

因此，默认情况下，按钮是内联元素（这是造成这种小差距的原因），这样它将填充100％的高度......

https://jsfiddle.net/n841wvwn/12/

Answer 4

作为所有解决方案的替代方案，您还可以将按钮对齐到表格单元格的顶部。那也行。

.button {
  width: 88px;
  height: 55px;
  border: none;
  margin: 0px;
  padding: 0px;
  vertical-align: top; /* added */
}

* {
  padding: 0px;
  margin: 0px;
}
div.table {
  display: table;
  border-collapse: collapse;
  table-layout: fixed;
}
div.tr {
  display: table-row;
}
div.td {
  display: table-cell;
  padding: 0;
  margin: 0;
}
.button {
  width: 88px;
  height: 55px;
  border: none;
  margin: 0px;
  padding: 0px;
  vertical-align: top; /* added */
}
#ac {
  background-image: url('http://i.imgur.com/u9znwQK.png');
  background-size: 100%;
}
#ce {
  background-image: url('http://i.imgur.com/azae5uQ.png');
  background-size: 100%;
}
#multiplication {
  background-image: url('http://i.imgur.com/veBf82o.png');
  background-size: 100%;
}
#division {
  background-image: url('http://i.imgur.com/i6KcXGr.png');
  background-size: 100%;
}
#number7 {
  background-image: url('http://i.imgur.com/0GixHJ5.png');
  background-size: 100%;
}

<div class="container">
  <div class="table" id="calculator">
    <div class="tr">
      <div class="td" id="display"></div>
    </div>
    <div class="tr">
      <div class="td">
        <button class="button" id="ac"></button>
      </div>
      <div class="td">
        <button class="button" id="ce"></button>
      </div>
      <div class="td">
        <button class="button" id="division"></button>
      </div>
      <div class="td">
        <button class="button" id="multiplication"></button>
      </div>
    </div>
    <div class="tr">
      <div class="td">
        <button class="button" id="number7"></button>
      </div>
    </div>
  </div>
</div>

Answer 5

按以下步骤更新您的CSS

 #number7 {
        background-image: url('http://i.imgur.com/0GixHJ5.png');
        background-size: 100%;
            position:relative;
            top:-4px;
    }

如何从css表中删除边距和填充

5 个答案: