CSS表格单元格高度等于img高度答案

【问题标题】：CSS table-cell height equal to img heightCSS表格单元格高度等于img高度
【发布时间】：2015-12-09 00:18:59
【问题描述】：

我有 CSS-table (display: table) > 带有内部 div (display: table-cell) > 带有内部 imgs。

表格单元格的宽度等于 imgs 的宽度，但问题是表格单元格的高度不是！它增加了一些额外的（4 或 5）像素。所以如果我的img是100px（高度），那么table-cell就是104px。

HTML

<div class="table">
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
  <div class="table-cell"><img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt=""></div>
  <div class="table-cell"><img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt=""></div>
</div>

CSS

.table {
  display: table;
}

.table-cell {
  display: table-cell;
  background: black;
}

请告诉我为什么会发生这种情况以及如何解决？

【问题讨论】：

即使您添加了 JSFiddle 链接，也始终添加有问题的代码。
好的，但是如果代码太长怎么办，Damian？
您仍然应该添加它。原因是有人可能有类似的问题，JSFiddle 链接可能会过期并且人们不会知道您的起点。这就是为什么你应该总是添加代码（或至少是代码的重要部分），这是有问题的。
好的，谢谢达米安，我会做的！

标签： html css

【解决方案1】：

为您的图像添加显示属性。

.table {
  display: table;
}
.table-cell {
  display: table-cell;
  background: black;
}
img {
  display: block;
}

<div class="table">
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
  <div class="table-cell">
    <img src="https://upload.wikimedia.org/wikipedia/commons/3/3d/Cyan-square.png" alt="">
  </div>
  <div class="table-cell">
    <img src="http://www.ddwcolor.com/wp-content/uploads/2012/09/Blue-square1.jpg" alt="">
  </div>
</div>

【讨论】：

Aaron，我猜“为什么”的答案在于 img 是一个内联元素，对吧？:)