Question

我的html标记是：

<table>
   <tbody>
       <tr>
          <td><span class="test">This is span.</span></td>
       </tr>
    </tbody>

css是：

.test{
  font-size : 12px;
}

我的span元素高度为12px。所以td也应该有12px的高度。但是如果我在chrome开发工具中检查，td的高度为21px。
Where is 9px coming from? How to get rid of it?

这是我的code pen

Answer 1

将span设为display:block

.test{
  font-size : 12px;
  display:block;
  background : rgba(255,0,0,.5);
}

用于删除所有元素的默认边距和填充使用此

*{
  margin:0;
  padding:0;
 }

* {
  margin: 0;
  padding: 0;
}
td {
  background: black;
  padding: 0;
  margin: 0;
}
.test {
  font-size: 12px;
  display: block;
  background: rgba(255, 0, 0, .5);
}

<table>
  <tbody>
    <tr>
      <td><span class="test">This is span.</span>
      </td>
    </tr>
  </tbody>
</table>

修改

问题是因为inline-block一项修正是将font-size:0;添加到父级删除了white-space

演示 - http://jsfiddle.net/s4ufsbd3/

td { background: black; padding: 0; margin: 0; font-size:0; }

* { margin: 0; padding: 0; } td { background: black; padding: 0; margin: 0; font-size: 0; } .test { font-size: 12px; display: inline-block; background: rgba(255, 0, 0, .5); }

<table> <tbody> <tr> <td><span class="test">This is span.</span><span class="test">This is span.</span> <span class="test">This is span.</span> <span class="test">This is span.</span> </td> </tr> </tbody> </table>

Answer 2

维托里诺费尔南德斯解决方案确实有效，但是自从font size : 0px;以来你在td内有文字时会遇到问题。

<table>
    <tbody>
      <tr>
         <td>SOME TEXT HERE<span class="test">This is span.</span></td>
      </tr>
   </tbody>
</table>

这是解决这个问题的问题。

 td{
     line-height : 0;
  }
 .test{
      font-size : 12px;
      display:inline-block;
       background : rgba(255,0,0,.5);
       line-height : 1;
  }

Answer 3

只需将此样式添加到 td 并选中style="line-height : 0;"

Answer 4

如建议的那样，行高是造成此空间的原因。此外，其他建议也可能有效，但是您也可以使用“边距”来调整文字的高度和/或使其符合您的喜好。

HTML

<table> 
   <tbody>
       <tr>
          <td><p>This is a paragraph. This paragraph is looooooooooooooooong and wants overlap.</p></td>
       </tr>
    </tbody>
</table>

CSS

table {
  border-collapse: collapse; /*only if you don't want border space between the cells*/
}
     
td {
  font-size:12px;
  padding: 0;
  margin: 0;
  line-height:0;
}
p {
  display:block;
  line-height: 1em;
  margin-top: 0px; /*adjust to your necessities*/
  margin-bottom: 0px;  /*adjust to your necessities*/
  }

如何从td摆脱额外的高度？

4 个答案: