删除表格顶部的额外间距答案

【问题标题】：Removing extra spacing on top of a table删除表格顶部的额外间距
【发布时间】：2016-05-06 17:44:10
【问题描述】：

我正在使用 div 和 table 创建布局。

<div class="main-container bg-white">
  <div class="main-content-container bg-blue">
    <div class="logo-container">
      <img src="http://thebrainfever.com/images/apple-logos/Silhouette.png" width="100px" height="100px"/>
    </div>
    <div class="menu-container">
      <a href="#">Menu 1</a> | <a href="#">Menu 2</a>
    </div>
  </div>
</div>
<div class="main-container bg-white">
  <div class="main-content-container bg-yellow">
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper">
      <tr>
        <td style="width: 100%; padding: 0px 5px; background-color: grey;" colspan="2">
          Content
        </td>
      </tr>
    </table>
  </div>
</div>

https://jsfiddle.net/odtkrumL/

布局看起来不错，只是表格顶部有额外的间距，使得文本“内容”被向下推了一点（黄色间距）。如何删除多余的（黄色）间距？

【问题讨论】：

标签： html css css-float html-table

【解决方案1】：

作为快速修复，将 display:block 添加到您的 .wrapper

.wrapper {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

小提琴：https://jsfiddle.net/qr7byupa/

【讨论】：

您好，如果我添加display: table;，黄色间距将被删除，但它将成为“标题部分”（带有徽标和菜单的部分）底部的额外间距。我想保持布局与我所做的一样，但内容中没有额外的间距。
这应该可以解决您的问题，将显示块添加到您的包装类 .wrapper { margin-left: auto;边距右：自动；显示：块； }
如果我添加该样式，如何使表格填充 100% 的列？添加该样式将直接将表格缩小到文本长度..
正如您提到的表格宽度为 100%，它将占据整个列。该元素现在是块级元素。

【解决方案2】：

请试试这个：

   .bg-white {
    background-color: #ffffff;
    display:flex
    }

【讨论】：

嗨，display: flex 标题的高度会增加。我想保持标题的高度。谢谢。